CINXE.COM

<!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="/flow/_next/static/media/m-flow_logo.5d297ae4.svg"/><link rel="preload" as="image" href="/flow/_next/static/media/Styleguide_Startseite.6974f330.svg"/><link rel="preload" as="image" href="/flow/_next/static/media/mittwald-logo-footer.99c0eef1.svg"/><link rel="preload" as="image" href="/flow/_next/static/media/Styleguide-Footer_Feedback.8fc04fe7.svg"/><link rel="stylesheet" href="/flow/_next/static/css/3b74983b8339f500.css" data-precedence="next"/><link rel="stylesheet" href="/flow/_next/static/css/6b673b7a8cffb1ab.css" data-precedence="next"/><link rel="stylesheet" href="/flow/_next/static/css/fe5c5c88c51ae6d3.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow/_next/static/chunks/webpack-275598f46e303cf8.js"/><script src="/flow/_next/static/chunks/26187f07-03ad175af448f565.js" async=""></script><script src="/flow/_next/static/chunks/387-b63ef217867b10cb.js" async=""></script><script src="/flow/_next/static/chunks/main-app-42e2fcfc37379956.js" async=""></script><script src="/flow/_next/static/chunks/1a966bdc-31375debd9af34b2.js" async=""></script><script src="/flow/_next/static/chunks/175c18d6-20c84bb65c0c9442.js" async=""></script><script src="/flow/_next/static/chunks/383-f8a6f03c871d1db0.js" async=""></script><script src="/flow/_next/static/chunks/35-4d64feb64c64bfa6.js" async=""></script><script src="/flow/_next/static/chunks/821-207982986047af46.js" async=""></script><script src="/flow/_next/static/chunks/493-bcdc21cbd1e6b92c.js" async=""></script><script src="/flow/_next/static/chunks/734-bda88cfb427bd371.js" async=""></script><script src="/flow/_next/static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js" async=""></script><script src="/flow/_next/static/chunks/app/layout-a8d8f99db809cb16.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="flow layout_body__oiEIT"><header class="layout_header__ttTk7"><a class="flow--link layout_homeLink__HdnFq" href="/flow"><img class="flow--image" src="/flow/_next/static/media/m-flow_logo.5d297ae4.svg" alt="mittwald Flow Logo"/></a><nav class="flow--header-navigation layout_headerNavigation__SNRbw" role="navigation" aria-label="Header navigation"><ul><li><a class="flow--header-navigation--link" href="/flow/01-get-started/installation"><span class="flow--text flow--text--align-start"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></span></a></li><li><a class="flow--header-navigation--link" href="/flow/02-foundations/01-design/01-design-tokens"><span class="flow--text flow--text--align-start"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></span></a></li><li><a class="flow--header-navigation--link" href="/flow/03-components/actions/action-group"><span class="flow--text flow--text--align-start"><span class="flow--emulated-bold-text">Components<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Components</span></span></span></a></li></ul></nav><nav class="flow--header-navigation layout_mobileNavigation__1XY9K" role="navigation"><ul><div><button type="button" tabindex="0" aria-expanded="false" id="react-aria-«R3dbH1»" 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"><main class="layout_main__30FUz"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-s:1fr;--column-layout--columns-m:1fr;--column-layout--columns-l:1fr;--column-layout--row-gap:var(--column-layout--gap--m);--column-layout--column-gap:var(--column-layout--gap--m)"><div class="flow--column-layout"><div class="flow--layout-card layout_homeTopLayoutCard__wd_2k"><img class="flow--image layout_homeImage__BIZsA" src="/flow/_next/static/media/Styleguide_Startseite.6974f330.svg" alt="Flow Design System"/><div class="flow--column-layout--column-layout-container layout_homeTopContent__vVyX6" style="--column-layout--columns-s:1fr;--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr;--column-layout--row-gap:var(--column-layout--gap--m);--column-layout--column-gap:var(--column-layout--gap--m)"><div class="flow--column-layout"><h1 class="flow--heading"><span class="flow--heading--heading-text">Flow Design System </span><span class="flow--heading--heading-content"><div class="flow--alert-badge flow--alert-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--icon--size-s flow--icon--info" 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--text flow--text--align-start flow--alert-badge--text">beta</span></div></span></h1><span class="flow--text flow--text--align-start">Entwickle performante und nutzerzentrierte Benutzeroberflächen, die die Markenidentität von mittwald konsistent widerspiegeln.</span></div></div></div><div class="flow--layout-card"><section class="flow--section"><h2 id="«R8ulb»" class="flow--heading flow--section--heading"><span class="flow--heading--heading-text">Unsere Grundprinzipien</span><span class="flow--heading--heading-content"></span></h2><span class="flow--text flow--text--align-start"><ul><li>Developer-Experience: Einfache Integration in gängige Frontend-Entwicklungsprozesse.</li><li>State-of-the-Art: Wir halten uns an Best Practices für leistungsfähige und nutzerzentrierte Benutzeroberflächen.</li><li>Open-Source: Flow ist 100 % öffentlich auf <a class="flow--link flow--link--inline" href="https://github.com/mittwald/flow">GitHub</a>.</li><li>Accessibility: Alle Components sind barrierefrei.</li></ul></span></section></div><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-s:1fr;--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr 1fr;--column-layout--row-gap:var(--column-layout--gap--m);--column-layout--column-gap:var(--column-layout--gap--m)"><div class="flow--column-layout"><div class="flow--layout-card"><section class="flow--section"><h2 id="«Rsulb»" class="flow--heading flow--section--heading"><span class="flow--heading--heading-text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flow--icon flow--heading--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M3 19l18 0"></path><path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path></svg>Get Started</span><span class="flow--heading--heading-content"></span></h2><span class="flow--text flow--text--align-start">Installiere Flow und starte in wenigen Schritten.</span><a class="flow--link" href="01-get-started/installation">Get started</a></section></div><div class="flow--layout-card"><section class="flow--section"><h2 id="«R1culb»" class="flow--heading flow--section--heading"><span class="flow--heading--heading-text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flow--icon flow--heading--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M5 8h4"></path><path d="M9 16h4"></path><path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"></path><path d="M14 9l4 -1"></path><path d="M16 16l3.923 -.98"></path></svg>Foundations</span><span class="flow--heading--heading-content"></span></h2><span class="flow--text flow--text--align-start">Erfahre mehr über die Grundlagen unseres Design Systems.</span><a class="flow--link" href="02-foundations/01-design/01-design-tokens">Foundations</a></section></div><div class="flow--layout-card"><section class="flow--section"><h2 id="«R1sulb»" class="flow--heading flow--section--heading"><span class="flow--heading--heading-text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flow--icon flow--heading--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>Components</span><span class="flow--heading--heading-content"></span></h2><span class="flow--text flow--text--align-start">Nutze unseren modularen Components-Baukasten für dein Projekt.</span><a class="flow--link" href="03-components/actions/action-group">Components</a></section></div></div></div></div></div></main></div><footer class="flow--layout-card footer_footer__PccBU"><div class="footer_footerWrapper__R837L"><div class="flow--column-layout--column-layout-container footer_footerColumnLayout__Ubd0i" style="--column-layout--columns-s:1fr;--column-layout--columns-m:1fr 1fr 2fr;--column-layout--columns-l:1fr 1fr 2fr;--column-layout--row-gap:var(--column-layout--gap--xl);--column-layout--column-gap:var(--column-layout--gap--xl)"><div class="flow--column-layout"><div class="FooterSection_footerSection__mS2kZ"><h3 class="flow--heading"><span class="flow--heading--heading-text">Ressourcen</span><span class="flow--heading--heading-content"></span></h3><div class="FooterSection_footerSectionContent__xcWdf"><a target="_blank" class="flow--link flow--link--dark" href="https://github.com/mittwald/flow">GitHub Repo<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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="false" aria-label="External link"><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><a target="_blank" class="flow--link flow--link--dark" href="https://developer.mittwald.de/">Developer-Portal<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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="false" aria-label="External link"><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></div></div><div class="FooterSection_footerSection__mS2kZ"><h3 class="flow--heading"><span class="flow--heading--heading-text">Rechtliches</span><span class="flow--heading--heading-content"></span></h3><div class="FooterSection_footerSectionContent__xcWdf"><a target="_blank" class="flow--link flow--link--dark" href="https://www.mittwald.de/impressum">Impressum<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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="false" aria-label="External link"><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><a target="_blank" class="flow--link flow--link--dark" href="https://www.mittwald.de/datenschutz">Datenschutz<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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="false" aria-label="External link"><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></div></div><div class="FooterSection_footerSection__mS2kZ"><h3 class="flow--heading"><span class="flow--heading--heading-text">Hilf uns, Flow noch besser zu machen!</span><span class="flow--heading--heading-content"></span></h3><div class="FooterSection_footerSectionContent__xcWdf">Fehlt dir eine bestimmte Component oder etwas Anderes? Hast du Feedback? Dann teile es uns gerne auf GitHub mit.<a target="_blank" class="flow--link flow--link--dark" href="https://github.com/mittwald/flow/issues/new?template=general-style-guide-feedback.md">Feedback zu Flow geben<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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="false" aria-label="External link"><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></div></div><div class="footer_mittwaldLogo__QGnWr"><img class="flow--image" src="/flow/_next/static/media/mittwald-logo-footer.99c0eef1.svg" alt="mittwald Logo"/>© 2024 Mittwald CM Service GmbH & Co. KG</div></div></div><div><img class="flow--image footer_feedbackPicture__FvbDd" src="/flow/_next/static/media/Styleguide-Footer_Feedback.8fc04fe7.svg" alt="Styleguide Feedback"/></div></div></footer><script src="/flow/_next/static/chunks/webpack-275598f46e303cf8.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[51001,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"ColumnLayout\"]\n4:I[72483,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"LayoutCard\"]\n5:I[47412,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Image\"]\n6:I[29746,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Heading\"]\n7:I[7808,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/"])</script><script>self.__next_f.push([1,"chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"AlertBadge\"]\n8:I[60111,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Text\"]\n9:I[71108,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Section\"]\na:I[71602,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Link\"]\nb:I[97621,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Icon\"]\nc:I[87792,[],\"OutletBoundary\"]\nf:I[87792,[],\"ViewportBoundary\"]\n11:I[87792,[],\"MetadataBoundary\"]\n13:I[23199,[],\"\"]\n:HL[\"/flow/_next/static/css/3b74983b8339f500.css\",\"style\"]\n:HL[\"/flow/_next/static/css/6b673b7a8cffb1ab.css\",\"style\"]\n:HL[\"/flow/_next/static/css/fe5c5c88c51ae6d3.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"UTwap_AsZTkttOv3Ri_vK\",\"p\":\"/flow\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow/_next/static/css/3b74983b8339f500.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow/_next/static/css/6b673b7a8cffb1ab.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/flow/_next/static/css/fe5c5c88c51ae6d3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L3\",null,{\"l\":[1],\"m\":[1],\"children\":[[\"$\",\"$L4\",null,{\"className\":\"layout_homeTopLayoutCard__wd_2k\",\"children\":[[\"$\",\"$L5\",null,{\"className\":\"layout_homeImage__BIZsA\",\"src\":\"/flow/_next/static/media/Styleguide_Startseite.6974f330.svg\",\"alt\":\"Flow Design System\"}],[\"$\",\"$L3\",null,{\"l\":[1],\"className\":\"layout_homeTopContent__vVyX6\",\"children\":[[\"$\",\"$L6\",null,{\"level\":1,\"children\":[\"Flow Design System \",[\"$\",\"$L7\",null,{\"children\":\"beta\"}]]}],[\"$\",\"$L8\",null,{\"children\":\"Entwickle performante und nutzerzentrierte Benutzeroberflächen, die die Markenidentität von mittwald konsistent widerspiegeln.\"}]]}]]}],[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L6\",null,{\"children\":\"Unsere Grundprinzipien\"}],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Developer-Experience: Einfache Integration in gängige Frontend-Entwicklungsprozesse.\"}],[\"$\",\"li\",null,{\"children\":\"State-of-the-Art: Wir halten uns an Best Practices für leistungsfähige und nutzerzentrierte Benutzeroberflächen.\"}],[\"$\",\"li\",null,{\"children\":[\"Open-Source: Flow ist 100 % öffentlich auf\",\" \",[\"$\",\"$La\",null,{\"href\":\"https://github.com/mittwald/flow\",\"children\":\"GitHub\"}],\".\"]}],[\"$\",\"li\",null,{\"children\":\"Accessibility: Alle Components sind barrierefrei.\"}]]}]}]]}]}],[\"$\",\"$L3\",null,{\"l\":[1,1,1],\"children\":[[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L6\",null,{\"children\":[[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"tabler-icon tabler-icon-device-laptop \",\"children\":[\"$undefined\",[\"$\",\"path\",\"svg-0\",{\"d\":\"M3 19l18 0\"}],[\"$\",\"path\",\"svg-1\",{\"d\":\"M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z\"}],\"$undefined\"]}]}],\"Get Started\"]}],[\"$\",\"$L8\",null,{\"children\":\"Installiere Flow und starte in wenigen Schritten.\"}],[\"$\",\"$La\",null,{\"href\":\"01-get-started/installation\",\"children\":\"Get started\"}]]}]}],[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L6\",null,{\"children\":[[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"tabler-icon tabler-icon-books \",\"children\":[\"$undefined\",[\"$\",\"path\",\"svg-0\",{\"d\":\"M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z\"}],[\"$\",\"path\",\"svg-1\",{\"d\":\"M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z\"}],[\"$\",\"path\",\"svg-2\",{\"d\":\"M5 8h4\"}],[\"$\",\"path\",\"svg-3\",{\"d\":\"M9 16h4\"}],[\"$\",\"path\",\"svg-4\",{\"d\":\"M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z\"}],[\"$\",\"path\",\"svg-5\",{\"d\":\"M14 9l4 -1\"}],[\"$\",\"path\",\"svg-6\",{\"d\":\"M16 16l3.923 -.98\"}],\"$undefined\"]}]}],\"Foundations\"]}],[\"$\",\"$L8\",null,{\"children\":\"Erfahre mehr über die Grundlagen unseres Design Systems.\"}],[\"$\",\"$La\",null,{\"href\":\"02-foundations/01-design/01-design-tokens\",\"children\":\"Foundations\"}]]}]}],[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L6\",null,{\"children\":[[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"tabler-icon tabler-icon-components \",\"children\":[\"$undefined\",[\"$\",\"path\",\"svg-0\",{\"d\":\"M3 12l3 3l3 -3l-3 -3z\"}],[\"$\",\"path\",\"svg-1\",{\"d\":\"M15 12l3 3l3 -3l-3 -3z\"}],[\"$\",\"path\",\"svg-2\",{\"d\":\"M9 6l3 3l3 -3l-3 -3z\"}],[\"$\",\"path\",\"svg-3\",{\"d\":\"M9 18l3 3l3 -3l-3 -3z\"}],\"$undefined\"]}]}],\"Components\"]}],[\"$\",\"$L8\",null,{\"children\":\"Nutze unseren modularen Components-Baukasten für dein Projekt.\"}],[\"$\",\"$La\",null,{\"href\":\"03-components/actions/action-group\",\"children\":\"Components\"}]]}]}]]}]]}],\"$undefined\",null,[\"$\",\"$Lc\",null,{\"children\":[\"$Ld\",\"$Le\",null]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"YxybDqzo-ySYlzpXPL9Td\",{\"children\":[[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],null]}],[\"$\",\"$L11\",null,{\"children\":\"$L12\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$13\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"14:I[88162,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"177\",\"static/chunks/app/layout-a8d8f99db809cb16.js\"],\"LinkProvider\"]\n15:I[12315,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"NotificationProvider\"]\n16:I[83720,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"177\",\"static/chunks/app/layout-a8d8f99db809cb16.js\"],\"default\"]\n49:I[13086,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"HeaderNavigation\"]\n4a:I[94330,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Content\"]\n4b:I[64885,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c"])</script><script>self.__next_f.push([1,"871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"ModalTrigger\"]\n4c:I[23205,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Button\"]\n4d:I[23545,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"IconMenu\"]\n4e:I[76545,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"158\",\"static/chunks/175c18d6-20c84bb65c0c9442.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"821\",\"static/chunks/821-207982986047af46.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"48\",\"static/chunks/app/%5B...slug%5D/page-95204fc32de7b20b.js\"],\"Modal\"]\n4f:I[28977,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"493\",\"static/chunks/493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"177\",\"static/chunks/app/layout-a8d8f99db809cb16.js\"],\"default\"]\n50:I[13440,[],\"\"]\n51:I[47110,[],\"\"]\n52:I[10132,[\"243\",\"static/chunks/1a966bdc-31375debd9af34b2.js\",\"383\",\"static/chunks/383-f8a6f03c871d1db0.js\",\"35\",\"static/chunks/35-4d64feb64c64bfa6.js\",\"493\",\"static/chunks/"])</script><script>self.__next_f.push([1,"493-bcdc21cbd1e6b92c.js\",\"734\",\"static/chunks/734-bda88cfb427bd371.js\",\"177\",\"static/chunks/app/layout-a8d8f99db809cb16.js\"],\"default\"]\n17:Tbc1,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n code: \"code\",\n h1: \"h1\",\n hr: \"hr\",\n p: \"p\",\n pre: \"pre\",\n strong: \"strong\",\n ..._provideComponents(),\n ...props.components\n }, {Alert, Content, Heading} = _components;\n if (!Alert) _missingMdxReference(\"Alert\", true);\n if (!Content) _missingMdxReference(\"Content\", true);\n if (!Heading) _missingMdxReference(\"Heading\", true);\n return _jsxs(_Fragment, {\n children: [_jsxs(Alert, {\n children: [_jsx(Heading, {\n children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n }), _jsx(Content, {\n children: _jsxs(_components.p, {\n children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n children: \"frühen Entwicklungsphase\"\n }), \", weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf, dass die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n })\n })]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h1, {\n children: \"Installation der Flow React Component Library\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n children: \"npm\"\n }), \" or\\n\", _jsx(_components.code, {\n children: \"yarn\"\n }), \" installiert werden.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-shell\",\n children: \"yarn add @mittwald/flow-react-components\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h1, {\n children: \"Styles importieren\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \"import \\\"@mittwald/flow-react-components/all.css\\\";\\n\"\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"18:T1866,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n code: \"code\",\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n hr: \"hr\",\n p: \"p\",\n pre: \"pre\",\n strong: \"strong\",\n ..._provideComponents(),\n ...props.components\n }, {LiveCodeEditor} = _components;\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h1, {\n children: \"Installation des Standalone Stylesheets\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n children: \"npm\"\n }), \" or \", _jsx(_components.code, {\n children: \"yarn\"\n }), \" installiert werden.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \"yarn add @mittwald/flow-stylesheet\\n\"\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h1, {\n children: \"Styles importieren\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h1, {\n children: \"Anwendung des Stylesheets\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nkomponentenbasierten und leicht zu verstehendem Schema.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Generelle Klassennamen-Auszeichnungen\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n children: \"-\"\n }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n children: \"--\"\n }), \" um logische Abschnitte zu unterteilen.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n children: \"flow\"\n }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Komponenten\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \".flow--button\\n.flow--heading\\n.flow--alert-icon\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Sub-Komponenten\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Spezialisierung: Verschiedene Varianten\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \".flow--button--primary\\n.flow--alert--danger\\n.flow--icon--fixed-width\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n children: \".flow--button--icon\\n.flow--alert--heading\\n\"\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Ein Hinweis zur Spezialisierung\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n children: \"zusätzlich zum Basis-Klassennamen\"\n }), \" verwendet werden.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n }), \"\\n\", _jsx(LiveCodeEditor, {\n example: \"variants\"\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Kombinierte Varianten\"\n }), \"\\n\", _jsx(LiveCodeEditor, {\n example: \"multiple-variants\"\n }), \"\\n\", _jsx(_components.h3, {\n children: \"In einer Komposition verwendete Komponenten\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Es ist gängige Praxis, größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der Alert besteht beispielsweise aus einem Icon,\\neiner Heading und optionalem Inhalt. Die verwendeten Komponenten müssen ihren\\nBasis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n children: \"flow--heading\"\n }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n children: \"flow--alert--heading\"\n }), \"), um spezifische\\nStyles des Inline Alerts zu erhalten.\"]\n }), \"\\n\", _jsx(LiveCodeEditor, {\n example: \"composition\"\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"19:T75b,export default () =\u003e {\n const styles: Record\u003cstring, React.CSSProperties\u003e = {\n layoutContainer: {\n display: \"grid\",\n gridTemplateAreas: `\n 'header header'\n 'nav content'\n `,\n gridTemplateColumns: \"90px 1fr\",\n gridTemplateRows: \"auto 1fr\",\n gap: \"10px\",\n border: \"1px solid rgba(206, 75, 255, 1)\",\n borderRadius: \"4px\",\n padding: \"10px\",\n },\n header: {\n gridArea: \"header\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n padding: \"10px\",\n textAlign: \"center\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n sideNavigation: {\n gridArea: \"nav\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n display: \"flex\",\n justifyContent: \"center\",\n padding: \"55px 10px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n width: \"90px\",\n },\n verticalText: {\n writingMode: \"vertical-rl\",\n transform: \"rotate(180deg)\",\n },\n content: {\n gridArea: \"content\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: \"10px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n textStyle: {\n color: \"rgba(0, 63, 184, 1)\",\n fontWeight: \"400\",\n fontSize: \"14px\",\n },\n };\n\n return (\n \u003cdiv style={styles.layoutContainer}\u003e\n \u003cheader style={styles.header}\u003e\n \u003cp style={styles.textStyle}\u003eHeader\u003c/p\u003e\n \u003c/header\u003e\n \u003cnav style={styles.sideNavigation}\u003e\n \u003cp\n style={{\n ...styles.verticalText,\n ...styles.textStyle,\n }}\n \u003e\n Side-Navigation\n \u003c/p\u003e\n \u003c/nav\u003e\n \u003cmain style={styles.content}\u003e\n \u003cp style={styles.textStyle}\u003eContent\u003c/p\u003e\n \u003c/main\u003e\n \u003c/div\u003e\n );\n};\n1a:T1011,"])</script><script>self.__next_f.push([1,"export default () =\u003e {\n const styles: Record\u003cstring, React.CSSProperties\u003e = {\n rootContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n border: \"1px solid rgba(206, 75, 255, 1)\",\n borderRadius: \"4px\",\n padding: \"10px\",\n },\n headerContainer: {\n display: \"grid\",\n gridTemplateAreas: `\n 'logo header header'\n `,\n gridTemplateColumns: \"60px 1fr 1fr\",\n gap: \"10px\",\n },\n layoutContainer: {\n display: \"grid\",\n gridTemplateAreas: `\n 'primaryNav secondaryNav breadcrumb breadcrumb'\n 'primaryNav secondaryNav pageTitle button'\n 'primaryNav secondaryNav content content'\n `,\n gridTemplateColumns: \"30px 60px 1fr\",\n gridTemplateRows: \"auto auto 1fr\",\n gap: \"10px\",\n },\n logo: {\n gridArea: \"logo\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n padding: \"10px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n header: {\n gridArea: \"header\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n padding: \"10px\",\n textAlign: \"center\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n primaryNav: {\n gridArea: \"primaryNav\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: \"38px 0px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n writingMode: \"vertical-rl\",\n transform: \"rotate(180deg)\",\n },\n secondaryNav: {\n gridArea: \"secondaryNav\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: \"38px 0px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n writingMode: \"vertical-rl\",\n transform: \"rotate(180deg)\",\n },\n breadcrumb: {\n gridArea: \"breadcrumb\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n textAlign: \"center\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n pageTitle: {\n gridArea: \"pageTitle\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n textAlign: \"center\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n button: {\n gridArea: \"button\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n padding: \"0px 5px\",\n textAlign: \"center\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n content: {\n gridArea: \"content\",\n backgroundColor: \"rgba(0, 84, 245, 0.02)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: \"10px\",\n border: \"1px dashed rgba(0, 84, 245, 1)\",\n borderRadius: \"4px\",\n },\n textStyle: {\n color: \"rgba(0, 63, 184, 1)\",\n fontWeight: \"400\",\n fontSize: \"14px\",\n },\n };\n\n return (\n \u003cdiv style={styles.rootContainer}\u003e\n \u003cdiv style={styles.headerContainer}\u003e\n \u003cdiv style={styles.logo}\u003e\n \u003cp style={styles.textStyle}\u003eLogo\u003c/p\u003e\n \u003c/div\u003e\n \u003cheader style={styles.header}\u003e\n \u003cp style={styles.textStyle}\u003eHeader\u003c/p\u003e\n \u003c/header\u003e\n \u003c/div\u003e\n \u003cdiv style={styles.layoutContainer}\u003e\n \u003cnav style={styles.primaryNav}\u003e\n \u003cp style={styles.textStyle}\u003ePrimary Navigation\u003c/p\u003e\n \u003c/nav\u003e\n \u003cnav style={styles.secondaryNav}\u003e\n \u003cp style={styles.textStyle}\u003e\n Secondary Navigation\n \u003c/p\u003e\n \u003c/nav\u003e\n \u003cdiv style={styles.breadcrumb}\u003e\n \u003cp style={styles.textStyle}\u003eBreadcrumb\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv style={styles.pageTitle}\u003e\n \u003cp style={styles.textStyle}\u003ePage Title\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv style={styles.button}\u003e\n \u003cp style={styles.textStyle}\u003eButton\u003c/p\u003e\n \u003c/div\u003e\n \u003cmain style={styles.content}\u003e\n \u003cp style={styles.textStyle}\u003eContent\u003c/p\u003e\n \u003c/main\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"1b:Ta8b,"])</script><script>self.__next_f.push([1,"import {\n Button,\n ColumnLayout,\n ContextMenu,\n ContextMenuTrigger,\n CopyButton,\n Header,\n Heading,\n IconContextMenu,\n Label,\n LabeledValue,\n LayoutCard,\n Link,\n MenuItem,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cColumnLayout m={[1]} l={[1]}\u003e\n \u003cLayoutCard\u003e\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eProjektübersicht\u003c/Heading\u003e\n \u003cContextMenuTrigger\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n \u003cIconContextMenu /\u003e\n \u003c/Button\u003e\n \u003cContextMenu\u003e\n \u003cMenuItem\n onAction={() =\u003e alert(\"not implemented\")}\n \u003e\n Domain umziehen\n \u003c/MenuItem\u003e\n \u003cMenuItem\n onAction={() =\u003e alert(\"not implemented\")}\n \u003e\n Domain entfernen\n \u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/ContextMenuTrigger\u003e\n \u003cButton onPress={() =\u003e alert(\"not implemented\")}\u003e\n Tarif anpassen\n \u003c/Button\u003e\n \u003c/Header\u003e\n \u003cColumnLayout l={[1, 1, 1]} m={[1, 1]}\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProjektname\u003c/Label\u003e\n \u003cText\u003eMein Projekt\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eServer\u003c/Label\u003e\n \u003cLink href=\"#\"\u003eMeinServer-01\u003c/Link\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\n \u003cLink href=\"#\" target=\"_blank\"\u003e\n p-lis5uw.project.space\n \u003c/Link\u003e\n \u003cCopyButton text=\"p-lis5uw.project.space\" /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eErstelldatum\u003c/Label\u003e\n \u003cText\u003e06.12.2023 um 11:40 Uhr\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eA-Record\u003c/Label\u003e\n \u003cText\u003e45.225.312.55\u003c/Text\u003e\n \u003cCopyButton text=\"45.225.312.55\" /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eShoert-ID\u003c/Label\u003e\n \u003cText\u003ep-lis5uw\u003c/Text\u003e\n \u003cCopyButton text=\"p-lis5uw\" /\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003c/LayoutCard\u003e\n\n \u003cColumnLayout l={[1, 1]}\u003e\n \u003cLayoutCard\u003e\n \u003cSection\u003e\n \u003cHeading\u003eLerne mehr über Flow\u003c/Heading\u003e\n \u003cText\u003e\n Nutze unseren Styleguide, um mehr über das Design\n System Flow zu erfahren.\n \u003c/Text\u003e\n \u003cLink href=\"#\"\u003eZum Styleguide\u003c/Link\u003e\n \u003c/Section\u003e\n \u003c/LayoutCard\u003e\n\n \u003cLayoutCard\u003e\n \u003cSection\u003e\n \u003cHeading\u003eGib uns Feedback\u003c/Heading\u003e\n \u003cText\u003e\n Wir freuen uns auf deine Anmerkungen und Wünsche\n zu Flow.\n \u003c/Text\u003e\n \u003cLink href=\"https://github.com/mittwald/flow\"\u003e\n Zum GitHub Repository\n \u003c/Link\u003e\n \u003c/Section\u003e\n \u003c/LayoutCard\u003e\n \u003c/ColumnLayout\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"1c:T188a,"])</script><script>self.__next_f.push([1,"import {\n Action,\n ActionGroup,\n AlertBadge,\n Align,\n Avatar,\n Button,\n CheckboxButton,\n ColumnLayout,\n Content,\n Header,\n Heading,\n IconDomain,\n IconHome,\n IconInvoice,\n IconSubdomain,\n Initials,\n Label,\n LayoutCard,\n Link,\n ListItemView,\n Modal,\n ModalTrigger,\n Section,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableFooterRow,\n TableHeader,\n TableRow,\n Text,\n TextField,\n typedList,\n} from \"@mittwald/flow-react-components\";\n\nexport default () =\u003e {\n interface Domain {\n hostname: string;\n type: \"Domain\" | \"Subdomain\" | \"Default-Domain\";\n ssl?: string;\n }\n\n const domains: Domain[] = [\n {\n hostname: \"toujours.de\",\n type: \"Domain\",\n },\n {\n hostname: \"www.toujours.de\",\n type: \"Subdomain\",\n ssl: \"Let’s Encrypt\",\n },\n {\n hostname: \"p-lis5uw.project.space\",\n type: \"Default-Domain\",\n ssl: \"Let’s Encrypt\",\n },\n ];\n const DomainList = typedList\u003cDomain\u003e();\n\n const addDomainModal = (\n \u003cModal offCanvas\u003e\n \u003cHeading\u003eDomain buchen\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cHeading\u003eWunsch-Domain\u003c/Heading\u003e\n \u003cText\u003e\n Eine Liste der Top-Level-Domains findest du auf\n unserer{\" \"}\n \u003cLink\n target=\"_blank\"\n href=\"https://www.mittwald.de/produkte/domains\"\n \u003e\n Domain-Seite\n \u003c/Link\u003e\n .\n \u003c/Text\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eDomain\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eDomain-Inhaber\u003c/Heading\u003e\n \u003cButton\n color=\"accent\"\n onPress={() =\u003e alert(\"not implemented\")}\n \u003e\n Hinzufügen\n \u003c/Button\u003e\n \u003c/Header\u003e\n \u003cText\u003e\n Du hast noch keinen Domain-Inhaber angelegt.\n \u003c/Text\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeading\u003eBestellübersicht\u003c/Heading\u003e\n \u003cColumnLayout\u003e\n \u003cAlign\u003e\n \u003cAvatar color=\"blue\"\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMeine Organisation\u003c/b\u003e\n Franz Müller\n \u003cbr /\u003e\n Jackenweg 44a\n \u003cbr /\u003e\n 12893 Lanzhausen\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003cAlign\u003e\n \u003cAvatar color=\"blue\"\u003e\n \u003cIconInvoice /\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eRechnung\u003c/b\u003e\n Franz Müller\n \u003cbr /\u003e\n Jackenweg 44a\n \u003cbr /\u003e\n 12893 Lanzhausen\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/ColumnLayout\u003e\n \u003cTable\u003e\n \u003cTableHeader\u003e\n \u003cTableColumn\u003eArtikel\u003c/TableColumn\u003e\n \u003cTableColumn\u003ePreis\u003c/TableColumn\u003e\n \u003c/TableHeader\u003e\n \u003cTableBody\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003eBeispiel Domain\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003eEinrichtungsgebühr\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableFooterRow\u003e\n \u003cTableCell\u003eGesamtpreis\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableFooterRow\u003e\n \u003c/TableBody\u003e\n \u003c/Table\u003e\n \u003cCheckboxButton isRequired\u003e\n Ich verstehe, dass ein Klick auf\n “Kostenpflichtig buchen” keinerlei Auswirkungen\n hat, da es sich um einen rein fiktiven\n Bestellprozess handelt. Es wird keine Bestellung\n ausgelöst und wir speichern keine Daten. Hier\n passiert nichts, daher sind AGBs und Datenschutz\n überflüssig.\n \u003c/CheckboxButton\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003cButton color=\"accent\"\u003e\n Kostenpflichtig bestellen\n \u003c/Button\u003e\n ‚\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n );\n\n return (\n \u003cLayoutCard\u003e\n \u003cSection\u003e\n {domains.length \u003e 0 \u0026\u0026 (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cActionGroup\u003e\n \u003cModalTrigger\u003e\n \u003cButton color=\"accent\"\u003e\n Domain anlegen\n \u003c/Button\u003e\n {addDomainModal}\n \u003c/ModalTrigger\u003e\n \u003c/ActionGroup\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Search /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"A bis Z\"\n defaultEnabled\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Filter\n name=\"Filter\"\n property=\"type\"\n /\u003e\n\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cListItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\"\n ? \"blue\"\n : domain.type === \"Subdomain\"\n ? \"teal\"\n : \"lilac\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : domain.type === \"Subdomain\" ? (\n \u003cIconSubdomain /\u003e\n ) : (\n \u003cIconHome /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}{\" \"}\n {!domain.ssl \u0026\u0026 (\n \u003cAlertBadge status=\"danger\"\u003e\n SSL-Zertifikat\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n \u003c/ListItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n )}\n \u003c/Section\u003e\n \u003c/LayoutCard\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"1d:T1083,"])</script><script>self.__next_f.push([1,"import {\n Action,\n ActionGroup,\n Align,\n Avatar,\n Button,\n CheckboxButton,\n ColumnLayout,\n Content,\n Header,\n Heading,\n IconDomain,\n IconInvoice,\n IllustratedMessage,\n Initials,\n Label,\n LayoutCard,\n Link,\n Modal,\n ModalTrigger,\n Section,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableFooterRow,\n TableHeader,\n TableRow,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\u003cLayoutCard\u003e\n \u003cIllustratedMessage\u003e\n \u003cIconDomain /\u003e\n \u003cHeading\u003eErste Domain buchen\u003c/Heading\u003e\n \u003cText\u003e\n Du hast noch keine Domain bei uns gebucht. Buche jetzt\n für dein Projekt eine Domain.\n \u003c/Text\u003e\n \u003cModalTrigger\u003e\n \u003cButton\u003eDomain buchen\u003c/Button\u003e\n \u003cModal offCanvas\u003e\n \u003cHeading\u003eDomain buchen\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cHeading\u003eWunsch-Domain\u003c/Heading\u003e\n \u003cText\u003e\n Eine Liste der Top-Level-Domains findest du\n auf unserer{\" \"}\n \u003cLink\n target=\"_blank\"\n href=\"https://www.mittwald.de/produkte/domains\"\n \u003e\n Domain-Seite\n \u003c/Link\u003e\n .\n \u003c/Text\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eDomain\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eDomain-Inhaber\u003c/Heading\u003e\n \u003cButton\n color=\"accent\"\n onPress={() =\u003e alert(\"not implemented\")}\n \u003e\n Hinzufügen\n \u003c/Button\u003e\n \u003c/Header\u003e\n \u003cText\u003e\n Du hast noch keinen Domain-Inhaber angelegt.\n \u003c/Text\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeading\u003eBestellübersicht\u003c/Heading\u003e\n \u003cColumnLayout\u003e\n \u003cAlign\u003e\n \u003cAvatar color=\"blue\"\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMeine Organisation\u003c/b\u003e\n Franz Müller\n \u003cbr /\u003e\n Jackenweg 44a\n \u003cbr /\u003e\n 12893 Lanzhausen\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003cAlign\u003e\n \u003cAvatar color=\"blue\"\u003e\n \u003cIconInvoice /\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eRechnung\u003c/b\u003e\n Franz Müller\n \u003cbr /\u003e\n Jackenweg 44a\n \u003cbr /\u003e\n 12893 Lanzhausen\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/ColumnLayout\u003e\n \u003cTable\u003e\n \u003cTableHeader\u003e\n \u003cTableColumn\u003eArtikel\u003c/TableColumn\u003e\n \u003cTableColumn\u003ePreis\u003c/TableColumn\u003e\n \u003c/TableHeader\u003e\n \u003cTableBody\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003eBeispiel Domain\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003eEinrichtungsgebühr\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableFooterRow\u003e\n \u003cTableCell\u003eGesamtpreis\u003c/TableCell\u003e\n \u003cTableCell\u003e0,00 €\u003c/TableCell\u003e\n \u003c/TableFooterRow\u003e\n \u003c/TableBody\u003e\n \u003c/Table\u003e\n \u003cCheckboxButton isRequired\u003e\n Ich verstehe, dass ein Klick auf\n “Kostenpflichtig buchen” keinerlei\n Auswirkungen hat, da es sich um einen rein\n fiktiven Bestellprozess handelt. Es wird keine\n Bestellung ausgelöst und wir speichern keine\n Daten. Hier passiert nichts, daher sind AGBs\n und Datenschutz überflüssig.\n \u003c/CheckboxButton\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003cButton color=\"accent\"\u003e\n Kostenpflichtig bestellen\n \u003c/Button\u003e\n ‚\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n \u003c/ModalTrigger\u003e\n \u003c/IllustratedMessage\u003e\n\u003c/LayoutCard\u003e;\n"])</script><script>self.__next_f.push([1,"1e:Te24,"])</script><script>self.__next_f.push([1,"import {\n Action,\n Alert,\n Button,\n ColumnLayout,\n Content,\n ContextMenu,\n ContextMenuTrigger,\n Header,\n Heading,\n IconContextMenu,\n Label,\n LabeledValue,\n LayoutCard,\n MenuItem,\n Section,\n Tab,\n Tabs,\n TabTitle,\n Text,\n} from \"@mittwald/flow-react-components\";\n\nexport default () =\u003e {\n const domain = {\n id: \"4\",\n hostname: \"example.de\",\n domain: \"example.de\",\n type: \"Domain\",\n ssl: undefined,\n owner: {\n firstName: \"Franz\",\n lastName: \"Müller\",\n street: \"Jackenweg\",\n houseNumber: \"44a\",\n zip: \"12893\",\n city: \"Lanzhausen\",\n email: \"f.mueller@mittwald.de\",\n },\n };\n\n const domainDetailsSection = (\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eDomain-Details\u003c/Heading\u003e\n \u003cContextMenuTrigger\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n \u003cIconContextMenu /\u003e\n \u003c/Button\u003e\n \u003cContextMenu\u003e\n \u003cMenuItem\n onAction={() =\u003e alert(\"not implemented\")}\n \u003e\n Domain umziehen\n \u003c/MenuItem\u003e\n \u003cMenuItem\n onAction={() =\u003e alert(\"not implemented\")}\n \u003e\n Domain entfernen\n \u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/ContextMenuTrigger\u003e\n\n \u003cButton onPress={() =\u003e alert(\"not implemented\")}\u003e\n Domain-Ziel ändern\n \u003c/Button\u003e\n \u003c/Header\u003e\n \u003cAlert status=\"danger\"\u003e\n \u003cHeading\u003e\n Es konnte kein SSL-Zertifikat ausgestellt werden\n \u003c/Heading\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Für diese Domain konnte kein SSL-Zertifikat\n ausgestellt werden, da {domain.hostname} nicht\n per DNS auf deine Server-IP zeigt. Ändere den\n A-Record oder CNAME auf die Server-IP zeigen. Es\n kann einige Minuten dauern, bis das Zertifikat\n bei korrekten Einstellungen ausgestellt ist.\n \u003c/Text\u003e\n \u003cAction showFeedback\u003e\n \u003cButton\u003eSSL-Zertifikat ausstellen\u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/Content\u003e\n \u003c/Alert\u003e\n \u003cColumnLayout s={[1, 1]}\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDomain-Ziel\u003c/Label\u003e\n \u003cText\u003e{domain.hostname}\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eZertifikat\u003c/Label\u003e\n \u003cText\u003e{domain.ssl ? domain.ssl : \"-\"}\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n );\n\n const domainOwnerSection = (\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eDomain-Inhaber\u003c/Heading\u003e\n \u003cButton\n color=\"secondary\"\n variant=\"soft\"\n onPress={() =\u003e alert(\"not implemented\")}\n \u003e\n Bearbeiten\n \u003c/Button\u003e\n \u003c/Header\u003e\n \u003cColumnLayout\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eInhaber\u003c/Label\u003e\n \u003cText\u003e\n {domain.owner.firstName} {domain.owner.lastName}\n \u003cbr /\u003e\n {domain.owner.street} {domain.owner.houseNumber}\n \u003cbr /\u003e\n {domain.owner.zip} {domain.owner.city}\n \u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n \u003cText\u003e{domain.owner.email}\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n );\n\n return (\n \u003cLayoutCard\u003e\n \u003cTabs\u003e\n \u003cTab\u003e\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n {domainDetailsSection}\n {domainOwnerSection}\n \u003c/Tab\u003e\n \u003cTab\u003e\n \u003cTabTitle\u003eDNS\u003c/TabTitle\u003e\n \u003cText\u003enot implemented\u003c/Text\u003e\n \u003c/Tab\u003e\n \u003cTab\u003e\n \u003cTabTitle\u003ePfade\u003c/TabTitle\u003e\n \u003cText\u003enot implemented\u003c/Text\u003e\n \u003c/Tab\u003e\n \u003c/Tabs\u003e\n \u003c/LayoutCard\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"1f:Tcc8,"])</script><script>self.__next_f.push([1,"import {\n Action,\n ActionGroup,\n Button,\n ColumnLayout,\n Content,\n Header,\n Heading,\n Label,\n LabeledValue,\n LayoutCard,\n Modal,\n ModalTrigger,\n Section,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\nexport default () =\u003e {\n const domain = {\n id: \"4\",\n hostname: \"example.de\",\n domain: \"example.de\",\n type: \"Domain\",\n ssl: undefined,\n owner: {\n firstName: \"Franz\",\n lastName: \"Müller\",\n street: \"Jackenweg\",\n houseNumber: \"44a\",\n zip: \"12893\",\n city: \"Lanzhausen\",\n email: \"f.mueller@mittwald.de\",\n },\n };\n\n const updateOwnerModal = (\n \u003cModal\u003e\n \u003cHeading\u003eDomain-Inhaber bearbeiten\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cColumnLayout\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.firstName}\n \u003e\n \u003cLabel\u003eVorname\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.lastName}\n \u003e\n \u003cLabel\u003eNachname\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cColumnLayout gap=\"s\" s={[2, 1]}\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.street}\n \u003e\n \u003cLabel\u003eStraße\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.houseNumber}\n \u003e\n \u003cLabel\u003eHausnr.\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/ColumnLayout\u003e\n \u003cColumnLayout gap=\"s\" s={[1, 2]}\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.zip}\n \u003e\n \u003cLabel\u003ePLZ\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cTextField\n isRequired\n defaultValue={domain.owner.city}\n \u003e\n \u003cLabel\u003eOrt\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/ColumnLayout\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003cButton color=\"accent\" type=\"submit\"\u003e\n Änderungen speichern\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n );\n\n return (\n \u003cLayoutCard\u003e\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eDomain-Inhaber\u003c/Heading\u003e\n \u003cModalTrigger\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n Bearbeiten\n \u003c/Button\u003e\n {updateOwnerModal}\n \u003c/ModalTrigger\u003e\n \u003c/Header\u003e\n \u003cColumnLayout\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eInhaber\u003c/Label\u003e\n \u003cText\u003e\n {domain.owner.firstName}{\" \"}\n {domain.owner.lastName}\n \u003cbr /\u003e\n {domain.owner.street}{\" \"}\n {domain.owner.houseNumber}\n \u003cbr /\u003e\n {domain.owner.zip} {domain.owner.city}\n \u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n \u003cText\u003e{domain.owner.email}\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003c/LayoutCard\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"20:T7c3,import {\n Align,\n Avatar,\n Button,\n Chat,\n Content,\n Header,\n Initials,\n Message,\n MessageSeparator,\n MessageThread,\n Text,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\u003cChat height={400}\u003e\n \u003cMessageThread\u003e\n \u003cMessageSeparator\u003eTicket geöffnet\u003c/MessageSeparator\u003e\n \u003cMessage\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam quas vel voluptas, ullam\n aliquid fugit. Voluptate harum accusantium rerum\n ullam modi blanditiis vitae, laborum ea tempore,\n dolore voluptas. Earum pariatur, similique\n corrupti id officia perferendis. Labore,\n similique. Earum, quas in. At dolorem corrupti\n blanditiis nulla deserunt laborum! Corrupti\n delectus aspernatur nihil nulla obcaecati ipsam\n porro sequi rem? Quam.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n \u003cMessage type=\"sender\"\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eJohn Doe\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam quas vel voluptas, ullam\n aliquid fugit. Voluptate harum accusantium rerum\n ullam modi blanditiis vitae, laborum ea tempore,\n dolore voluptas. Earum pariatur, similique\n corrupti id officia perferendis. Labore,\n similique. Earum, quas in.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n \u003c/MessageThread\u003e\n \u003cTextArea\n aria-label=\"Nachricht\"\n rows={1}\n autoResizeMaxRows={4}\n /\u003e\n \u003cButton color=\"accent\"\u003eSenden\u003c/Button\u003e\n\u003c/Chat\u003e;\n21:T70e,import {\n Align,\n Avatar,\n Button,\n Chat,"])</script><script>self.__next_f.push([1,"\n Content,\n Header,\n Initials,\n Message,\n MessageThread,\n Text,\n TextArea,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\n\nexport default () =\u003e {\n const form = useForm\u003c{ message: string }\u003e();\n\n return (\n \u003cChat\u003e\n \u003cMessageThread\u003e\n \u003cMessage\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet consectetur\n adipisicing elit. Cumque eius quam quas vel\n voluptas, ullam aliquid fugit. Voluptate harum\n accusantium rerum ullam modi blanditiis vitae,\n laborum ea tempore, dolore voluptas. Earum\n pariatur, similique corrupti id officia\n perferendis. Labore, similique. Earum, quas\n in. At dolorem corrupti blanditiis nulla\n deserunt laborum! Corrupti delectus aspernatur\n nihil nulla obcaecati ipsam porro sequi rem?\n Quam.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n \u003c/MessageThread\u003e\n \u003cForm\n form={form}\n onSubmit={() =\u003e {\n console.log(\"submitted\");\n }}\n \u003e\n \u003cField name=\"message\"\u003e\n \u003cTextArea\n aria-label=\"message\"\n rows={1}\n autoResizeMaxRows={4}\n /\u003e\n \u003c/Field\u003e\n \u003cButton color=\"accent\" type=\"submit\"\u003e\n Submit\n \u003c/Button\u003e\n \u003c/Form\u003e\n \u003c/Chat\u003e\n );\n};\n22:T48d,import {\n FileCard,\n FileCardList,\n Align,\n Avatar,\n Button,\n Chat,\n Content,\n Header,\n Initials,\n Message,\n MessageThread,\n Text,\n TextArea,\n IconAttachment,\n} from \"@mittwald/flow-react-components\";\n\n\u003cChat\u003e\n \u003cMessageThread\u003e\n \u003cMessage\u003e\n \u003cHeader\u003e\n \u003c"])</script><script>self.__next_f.push([1,"Align\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Labore, similique. Earum, quas in. At dolorem\n corrupti blanditiis nulla deserunt laborum!\n Corrupti delectus aspernatur nihil nulla obcaecati\n ipsam porro sequi rem? Quam.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n \u003c/MessageThread\u003e\n \u003cButton\n color=\"secondary\"\n variant=\"plain\"\n aria-label=\"Datei anhängen\"\n \u003e\n \u003cIconAttachment /\u003e\n \u003c/Button\u003e\n \u003cTextArea\n aria-label=\"Nachricht\"\n rows={1}\n autoResizeMaxRows={4}\n /\u003e\n \u003cButton color=\"accent\"\u003eSenden\u003c/Button\u003e\n \u003cFileCardList\u003e\n \u003cFileCard name=\"Hochgeladene Datei 1\" /\u003e\n \u003cFileCard name=\"Hochgeladene Datei 2\" /\u003e\n \u003c/FileCardList\u003e\n\u003c/Chat\u003e;\n23:T753,import {\n Align,\n Avatar,\n Content,\n Header,\n Initials,\n Message,\n MessageSeparator,\n MessageThread,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cMessageThread\u003e\n \u003cMessage type=\"sender\"\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam quas vel voluptas, ullam\n aliquid fugit. Voluptate harum accusantium rerum\n ullam modi blanditiis vitae.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n\n \u003cMessage type=\"responder\"\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eJohn Doe\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam quas vel voluptas, ullam\n aliquid fugit. Voluptate harum accusantium rerum\n ullam modi blanditiis vitae, laborum ea tempore,\n"])</script><script>self.__next_f.push([1," dolore voluptas. Earum pariatur, similique corrupti\n id officia perferendis. Labore, similique. Earum,\n quas in. At dolorem corrupti blanditiis nulla\n deserunt laborum! Corrupti delectus aspernatur nihil\n nulla obcaecati ipsam porro sequi rem? Quam.\n \u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n\n \u003cMessageSeparator\u003eTicket geschlossen\u003c/MessageSeparator\u003e\n\n \u003cMessage type=\"sender\"\u003e\n \u003cHeader\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003c/Header\u003e\n \u003cContent\u003e\n \u003cText\u003eLorem ipsum dolor sit amet.\u003c/Text\u003e\n \u003c/Content\u003e\n \u003c/Message\u003e\n\u003c/MessageThread\u003e;\n24:T406,import {\n Align,\n Avatar,\n Button,\n Content,\n ContextMenu,\n ContextMenuTrigger,\n Header,\n Initials,\n MenuItem,\n Message,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cMessage type=\"sender\"\u003e\n \u003cHeader\u003e\n \u003cContextMenuTrigger\u003e\n \u003cButton /\u003e\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eBearbeiten\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/ContextMenuTrigger\u003e\n \u003cAlign\u003e\n \u003cAvatar\u003e\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\n \u003c/Avatar\u003e\n \u003cText\u003e\n \u003cb\u003eMax Mustermann\u003c/b\u003e\n Organisationsinhaber\n \u003c/Text\u003e\n \u003c/Align\u003e\n \u003cText\u003e01.09.2024, 12:45\u003c/Text\u003e\n \u003c/Header\u003e\n\n \u003cContent\u003e\n \u003cText\u003e\n Lorem ipsum dolor sit amet, consetetur sadipscing\n elitr, sed diam nonumy eirmod tempor invidunt ut\n labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores\n et ea rebum. Stet clita kasd gubergren, no sea\n takimata sanctus est Lorem ipsum dolor sit amet.\n \u003c/Text\u003e\n \u003c/Content\u003e\n\u003c/Message\u003e;\n25:T14c7,"])</script><script>self.__next_f.push([1,"import {\n ColumnLayout,\n IconApp,\n IconAutoresponder,\n IconBackup,\n IconBulb,\n IconCalendar,\n IconCamera,\n IconCertificate,\n IconChangelog,\n IconClock,\n IconContract,\n IconContractPartner,\n IconCronjob,\n IconCustomer,\n IconDashboard,\n IconDatabase,\n IconDeliveryBox,\n IconDesktop,\n IconDirectory,\n IconDomain,\n IconEmail,\n IconExtension,\n IconFile,\n IconForward,\n IconInbox,\n IconInvoice,\n IconLink,\n IconMember,\n IconMittwald,\n IconMobile,\n IconMove,\n IconNumber,\n IconOrder,\n IconPassword,\n IconPayment,\n IconPerformance,\n IconProject,\n IconSearchEngine,\n IconSecurity,\n IconServer,\n IconSpamProtectionOff,\n IconSpamProtectionOn,\n IconSparkles,\n IconSshKey,\n IconSshSftp,\n IconStar,\n IconStarFilled,\n IconSubdomain,\n IconSupport,\n IconTerminate,\n IconTicket,\n IconUser,\n IconVhost,\n Label,\n LabeledValue,\n} from \"@mittwald/flow-react-components\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003emittwald\u003c/Label\u003e\n \u003cIconMittwald /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eStar\u003c/Label\u003e\n \u003cIconStar /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eStar Filled\u003c/Label\u003e\n \u003cIconStarFilled /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSparkles\u003c/Label\u003e\n \u003cIconSparkles /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProject\u003c/Label\u003e\n \u003cIconProject /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eServer\u003c/Label\u003e\n \u003cIconServer /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCustomer\u003c/Label\u003e\n \u003cIconCustomer /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSupport\u003c/Label\u003e\n \u003cIconSupport /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eE-Mail\u003c/Label\u003e\n \u003cIconEmail /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDelivery Box\u003c/Label\u003e\n \u003cIconDeliveryBox /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eApp\u003c/Label\u003e\n \u003cIconApp /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDomain\u003c/Label\u003e\n \u003cIconDomain /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eVhost\u003c/Label\u003e\n \u003cIconVhost /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSubdomain\u003c/Label\u003e\n \u003cIconSubdomain /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCertificate\u003c/Label\u003e\n \u003cIconCertificate /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMove\u003c/Label\u003e\n \u003cIconMove /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDirectory\u003c/Label\u003e\n \u003cIconDirectory /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eFile\u003c/Label\u003e\n \u003cIconFile /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDatabase\u003c/Label\u003e\n \u003cIconDatabase /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eChangelog\u003c/Label\u003e\n \u003cIconChangelog /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eExtension\u003c/Label\u003e\n \u003cIconExtension /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eOrder\u003c/Label\u003e\n \u003cIconOrder /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003ePerformance\u003c/Label\u003e\n \u003cIconPerformance /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eTicket\u003c/Label\u003e\n \u003cIconTicket /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eContractPartner\u003c/Label\u003e\n \u003cIconContractPartner /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eInvoice\u003c/Label\u003e\n \u003cIconInvoice /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003ePayment\u003c/Label\u003e\n \u003cIconPayment /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eContract\u003c/Label\u003e\n \u003cIconContract /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCamera\u003c/Label\u003e\n \u003cIconCamera /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eBackup\u003c/Label\u003e\n \u003cIconBackup /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCronjob\u003c/Label\u003e\n \u003cIconCronjob /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMember\u003c/Label\u003e\n \u003cIconMember /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eUser\u003c/Label\u003e\n \u003cIconUser /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n \u003cIconSearchEngine /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n \u003cIconSshSftp /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eInbox\u003c/Label\u003e\n \u003cIconInbox /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n \u003cIconSpamProtectionOff /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n \u003cIconSpamProtectionOn /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eNumber\u003c/Label\u003e\n \u003cIconNumber /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eClock\u003c/Label\u003e\n \u003cIconClock /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCalendar\u003c/Label\u003e\n \u003cIconCalendar /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDashboard\u003c/Label\u003e\n \u003cIconDashboard /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eTerminate\u003c/Label\u003e\n \u003cIconTerminate /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSecurity\u003c/Label\u003e\n \u003cIconSecurity /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSshKey\u003c/Label\u003e\n \u003cIconSshKey /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eForward\u003c/Label\u003e\n \u003cIconForward /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eAutoresponder\u003c/Label\u003e\n \u003cIconAutoresponder /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003ePassword\u003c/Label\u003e\n \u003cIconPassword /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDesktop\u003c/Label\u003e\n \u003cIconDesktop /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMobile\u003c/Label\u003e\n \u003cIconMobile /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eBulb\u003c/Label\u003e\n \u003cIconBulb /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eLink\u003c/Label\u003e\n \u003cIconLink /\u003e\n \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"26:T102e,"])</script><script>self.__next_f.push([1,"import {\n ColumnLayout,\n IconBackLink,\n IconCheck,\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconCheckboxIndeterminate,\n IconChevronDown,\n IconChevronLeft,\n IconChevronRight,\n IconChevronUp,\n IconClose,\n IconCode,\n IconContextMenu,\n IconContextMenuVertical,\n IconCopy,\n IconDelete,\n IconDownload,\n IconEdit,\n IconExternalLink,\n IconFilter,\n IconHide,\n IconHome,\n IconLogout,\n IconMaximize,\n IconMenu,\n IconMinimize,\n IconMinus,\n IconNotification,\n IconPlus,\n IconRadioOff,\n IconRadioOn,\n IconRedo,\n IconRefresh,\n IconSave,\n IconSearch,\n IconSettings,\n IconShare,\n IconShow,\n IconSorting,\n IconUndo,\n IconView,\n Label,\n LabeledValue,\n} from \"@mittwald/flow-react-components\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eHome\u003c/Label\u003e\n \u003cIconHome /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eNotification\u003c/Label\u003e\n \u003cIconNotification /\u003e\n \u003c/LabeledValue\u003e\n\n \u003cLabeledValue\u003e\n \u003cLabel\u003eLogout\u003c/Label\u003e\n \u003cIconLogout /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSearch\u003c/Label\u003e\n \u003cIconSearch /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMenu\u003c/Label\u003e\n \u003cIconMenu /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eView\u003c/Label\u003e\n \u003cIconView /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eFilter\u003c/Label\u003e\n \u003cIconFilter /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSorting\u003c/Label\u003e\n \u003cIconSorting /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eContext Menu\u003c/Label\u003e\n \u003cIconContextMenu /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eContext Menu Vertical\u003c/Label\u003e\n \u003cIconContextMenuVertical /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMaximize\u003c/Label\u003e\n \u003cIconMaximize /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMinimize\u003c/Label\u003e\n \u003cIconMinimize /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eEdit\u003c/Label\u003e\n \u003cIconEdit /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eShare\u003c/Label\u003e\n \u003cIconShare /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSave\u003c/Label\u003e\n \u003cIconSave /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eSettings\u003c/Label\u003e\n \u003cIconSettings /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDelete\u003c/Label\u003e\n \u003cIconDelete /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCopy\u003c/Label\u003e\n \u003cIconCopy /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eBacklink\u003c/Label\u003e\n \u003cIconBackLink /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eExternal Link\u003c/Label\u003e\n \u003cIconExternalLink /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eChevron Down\u003c/Label\u003e\n \u003cIconChevronDown /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eChevron Left\u003c/Label\u003e\n \u003cIconChevronLeft /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eChevron Right\u003c/Label\u003e\n \u003cIconChevronRight /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eChevronUp\u003c/Label\u003e\n \u003cIconChevronUp /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eClose\u003c/Label\u003e\n \u003cIconClose /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eShow\u003c/Label\u003e\n \u003cIconShow /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eHide\u003c/Label\u003e\n \u003cIconHide /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003ePlus\u003c/Label\u003e\n \u003cIconPlus /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eMinus\u003c/Label\u003e\n \u003cIconMinus /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCode\u003c/Label\u003e\n \u003cIconCode /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n \u003cIconCheckboxChecked /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n \u003cIconCheckboxEmpty /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n \u003cIconCheckboxIndeterminate /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eRadioOff\u003c/Label\u003e\n \u003cIconRadioOff /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eRadioOn\u003c/Label\u003e\n \u003cIconRadioOn /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eRefresh\u003c/Label\u003e\n \u003cIconRefresh /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eCheck\u003c/Label\u003e\n \u003cIconCheck /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eDownload\u003c/Label\u003e\n \u003cIconDownload /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eRedo\u003c/Label\u003e\n \u003cIconRedo /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eUndo\u003c/Label\u003e\n \u003cIconUndo /\u003e\n \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"27:T61a,import {\n Button,\n FileCard,\n FileCardList,\n FileField,\n Label,\n Section,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\nexport default () =\u003e {\n const form = useForm\u003c{\n files: FileList | File[] | [];\n }\u003e({ defaultValues: { files: [] } });\n const Field = typedField(form);\n\n const watchedFiles = [...form.watch(\"files\")];\n\n return (\n \u003cSection\u003e\n \u003cForm form={form} onSubmit={sleep}\u003e\n \u003cField\n name=\"files\"\n rules={{\n required:\n \"Bitte wähle mindestens eine Datei aus\",\n }}\n \u003e\n \u003cFileField multiple\u003e\n \u003cLabel\u003eDateien\u003c/Label\u003e\n \u003cButton variant=\"outline\" color=\"secondary\"\u003e\n Auswählen\n \u003c/Button\u003e\n \u003c/FileField\u003e\n \u003c/Field\u003e\n \u003cFileCardList\u003e\n {watchedFiles.map((file) =\u003e (\n \u003cFileCard\n name={file.name}\n type={file.type}\n key={file.name}\n sizeInBytes={file.size}\n onDelete={() =\u003e\n form.setValue(\n \"files\",\n watchedFiles.filter(\n (watched) =\u003e watched !== file,\n ),\n )\n }\n /\u003e\n ))}\n \u003c/FileCardList\u003e\n \u003cButton type=\"submit\"\u003eHochladen\u003c/Button\u003e\n \u003c/Form\u003e\n \u003c/Section\u003e\n );\n};\n28:T5a8,import {\n Content,\n RadioButton,\n RadioGroup,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cRadioGroup\n defaultValue=\"bookDomain\"\n aria-label=\"Domain\"\n l={[1, 1]}\n\u003e\n \u003cRadioButton value=\"bookDomain\"\u003e\n \u003cText\u003eDomain buchen\u003c/Text\u003e\n \u003cContent\u003e\n Du hast eine Wunsch-Domain? Kein Problem, wir helfen\n dir, die passende Domain für dich zu finden.\n \u003cbr /\u003e\n \u003cstrong\u003e\n \u003csmall\u003e8,28€ jährlich\u003c/small\u003e\n \u003c/strong\u003e\n \u003c/Content\u003e\n "])</script><script>self.__next_f.push([1,"\u003c/RadioButton\u003e\n \u003cRadioButton value=\"moveDomain\"\u003e\n \u003cText\u003eDomain umziehen\u003c/Text\u003e\n \u003cContent\u003e\n Du hast schon eine Domain und möchtest sie von deinem\n jetzigen Anbieter zu mittwald umziehen.\n \u003cbr /\u003e\n \u003cstrong\u003e\n \u003csmall\u003e8,28€ jährlich\u003c/small\u003e\n \u003c/strong\u003e\n \u003c/Content\u003e\n \u003c/RadioButton\u003e\n \u003cRadioButton value=\"virtualHost\"\u003e\n \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\n \u003cContent\u003e\n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \u003cbr /\u003e\n \u003cstrong\u003e\n \u003csmall\u003ekostenlos\u003c/small\u003e\n \u003c/strong\u003e\n \u003c/Content\u003e\n \u003c/RadioButton\u003e\n \u003cRadioButton value=\"subdomain\"\u003e\n \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\n \u003cContent\u003e\n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \u003cbr /\u003e\n \u003cstrong\u003e\n \u003csmall\u003ekostenlos\u003c/small\u003e\n \u003c/strong\u003e\n \u003c/Content\u003e\n \u003c/RadioButton\u003e\n\u003c/RadioGroup\u003e;\n29:T472,import {\n Button,\n Label,\n Radio,\n RadioGroup,\n Section,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\nexport default () =\u003e {\n const form = useForm\u003c{ coffee: string }\u003e({\n defaultValues: { coffee: \"more\" },\n });\n const Field = typedField(form);\n\n return (\n \u003cSection\u003e\n \u003cForm form={form} onSubmit={sleep}\u003e\n \u003cField\n name=\"coffee\"\n rules={{\n required: \"Bitte gib deinen Kaffeekonsum an\",\n }}\n \u003e\n \u003cRadioGroup\u003e\n \u003cLabel\u003eTäglicher Kaffeekonsum\u003c/Label\u003e\n \u003cRadio value=\"more\"\u003eMehr als 6 Tassen\u003c/Radio\u003e\n \u003cRadio value=\"5-6\"\u003e5-6 Tassen\u003c/Radio\u003e\n \u003cRadio value=\"3-4\"\u003e3-4 Tassen\u003c/Radio\u003e\n \u003cRadio value=\"1-2\"\u003e1-2 Tassen\u003c/Radio\u003e\n \u003cRadio value=\"none\"\u003eTrinke keinen Kaffee\u003c/Radio\u003e\n \u003c/RadioGroup\u003e\n \u003c/Field\u003e\n \u003cB"])</script><script>self.__next_f.push([1,"utton type=\"submit\"\u003eSpeichern\u003c/Button\u003e\n \u003c/Form\u003e\n \u003c/Section\u003e\n );\n};\n2a:T43c,import {\n ColumnLayout,\n FieldDescription,\n Label,\n Section,\n Segment,\n SegmentedControl,\n TextField,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () =\u003e {\n const [showContent, setShowContent] =\n useState\u003cboolean\u003e(false);\n\n return (\n \u003cSection\u003e\n \u003cSegmentedControl\n defaultValue=\"lastschrift\"\n onChange={() =\u003e setShowContent(!showContent)}\n \u003e\n \u003cLabel\u003eZahlungsart\u003c/Label\u003e\n \u003cSegment value=\"lastschrift\"\u003eLastschrift\u003c/Segment\u003e\n \u003cSegment value=\"Rechnung\"\u003eRechnung\u003c/Segment\u003e\n {showContent \u0026\u0026 (\n \u003cFieldDescription\u003e\n Wähle bitte eine Bankverbindung für die\n Bezahlung mit SEPA-Lastschrift aus.\n \u003c/FieldDescription\u003e\n )}\n \u003c/SegmentedControl\u003e\n {showContent \u0026\u0026 (\n \u003cColumnLayout\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eKontoinhaber\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eIBAN\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/ColumnLayout\u003e\n )}\n \u003c/Section\u003e\n );\n};\n2b:T42c,import {\n Button,\n Label,\n Section,\n Slider,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\nexport default () =\u003e {\n const form = useForm\u003c{ storage: number }\u003e();\n const Field = typedField(form);\n\n return (\n \u003cSection\u003e\n \u003cForm form={form} onSubmit={sleep}\u003e\n \u003cField\n name=\"storage\"\n rules={{\n required:\n \"Bitte wähle deinen Speicherplatz aus\",\n }}\n \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 "])</script><script>self.__next_f.push([1," showInitialMarker\n \u003e\n \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n \u003c/Slider\u003e\n \u003c/Field\u003e\n \u003cButton type=\"submit\"\u003eSpeichern\u003c/Button\u003e\n \u003c/Form\u003e\n \u003c/Section\u003e\n );\n};\n2c:T42c,import {\n Header,\n Heading,\n Label,\n LabeledValue,\n Section,\n Switch,\n Tab,\n Tabs,\n TabTitle,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\u003cTabs\u003e\n \u003cTab\u003e\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n \u003cSection\u003e\n \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003c/Tab\u003e\n \u003cTab id=\"storage\"\u003e\n \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n \u003cSection\u003e\n \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n \u003cText\u003e2.4 GB\u003c/Text\u003e\n \u003c/LabeledValue\u003e\n \u003c/Section\u003e\n \u003c/Tab\u003e\n \u003cTab\u003e\n \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n \u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n \u003c/Header\u003e\n \u003cText\u003e\n Der Spamfilter schützt dich vor ungewollten E-Mails.\n Niemand will Müll in seinem Postfach, daher\n empfehlen wir den Spamschutz immer aktiviert zu\n lassen.\n \u003c/Text\u003e\n \u003c/Section\u003e\n \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n2d:T569,import {\n Action,\n ActionGroup,\n Button,\n Content,\n Heading,\n Label,\n Modal,\n Section,\n Text,\n TextField,\n useOverlayController,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\nexport default () =\u003e {\n const controller = useOverlayController(\"Modal\");\n\n return (\n \u003c\u003e\n \u003cButton onPress={controller.open}\u003e\n Modal öffnen\n \u003c/Button\u003e\n\n \u003cModal controller={controller}\u003e\n \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cText\u003e\n Eine Organisation kannst du dir wie ein\n Unternehmen vorstellen. An diesem Ort\n verwaltest du deine Mitarbeiter,\n Zahlungsmodalitäten"])</script><script>self.__next_f.push([1," und kannst deine\n Rechnungen einsehen.\n \u003c/Text\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"accent\"\u003e\n Organisation anlegen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n \u003c/\u003e\n );\n};\n2e:T44e,import {\n Action,\n ActionGroup,\n Button,\n Content,\n Heading,\n Label,\n Modal,\n ModalTrigger,\n Section,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\u003e\n \u003cButton\u003eModal öffnen\u003c/Button\u003e\n \u003cModal\u003e\n \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cText\u003e\n Eine Organisation kannst du dir wie ein\n Unternehmen vorstellen. An diesem Ort verwaltest\n du deine Mitarbeiter, Zahlungsmodalitäten und\n kannst deine Rechnungen einsehen.\n \u003c/Text\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"accent\"\u003e\n Organisation anlegen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n2f:T5a9,import {\n Action,\n ActionGroup,\n Button,\n Content,\n Heading,\n Label,\n Modal,\n TextField,\n useOverlayController,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\n\nexport default ()"])</script><script>self.__next_f.push([1," =\u003e {\n const controller = useOverlayController(\"Modal\");\n\n const form = useForm\u003c{ name: string }\u003e();\n\n const Field = typedField(form);\n\n const handleOnSubmit = async () =\u003e {\n // submit form\n\n controller.close();\n };\n\n return (\n \u003c\u003e\n \u003cButton onPress={controller.open}\u003e\n Modal öffnen\n \u003c/Button\u003e\n\n \u003cModal controller={controller}\u003e\n \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n\n \u003cContent\u003e\n \u003cField\n name=\"name\"\n rules={{\n required: \"Bitte gib einen Namen ein\",\n }}\n \u003e\n \u003cTextField\u003e\n \u003cLabel\u003eName\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Field\u003e\n \u003c/Content\u003e\n\n \u003cActionGroup\u003e\n \u003cButton color=\"accent\" type=\"submit\"\u003e\n Speichern\n \u003c/Button\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Form\u003e\n \u003c/Modal\u003e\n \u003c/\u003e\n );\n};\n30:T451,import {\n Action,\n ActionGroup,\n Button,\n Content,\n Heading,\n Label,\n Modal,\n ModalTrigger,\n Section,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\u003e\n \u003cButton\u003eOffCanvas öffnen\u003c/Button\u003e\n \u003cModal offCanvas\u003e\n \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cText\u003e\n Eine Organisation kannst du dir wie ein\n Unternehmen vorstellen. An diesem Ort verwaltest\n du deine Mitarbeiter, Zahlungsmodalitäten und\n kannst deine Rechnungen einsehen.\n \u003c/Text\u003e\n \u003cTextField\u003e\n \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"accent\"\u003e\n Organisat"])</script><script>self.__next_f.push([1,"ion anlegen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Abbrechen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n31:T248e,"])</script><script>self.__next_f.push([1,"import {\n Action,\n ActionGroup,\n Button,\n ColumnLayout,\n Content,\n DatePicker,\n FieldDescription,\n Heading,\n IconBackup,\n IconSettings,\n IconSshSftp,\n Label,\n Link,\n Modal,\n ModalTrigger,\n Option,\n RadioButton,\n RadioGroup,\n Section,\n Segment,\n SegmentedControl,\n Select,\n Switch,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\nexport default () =\u003e {\n return (\n \u003cRow\u003e\n \u003cModalTrigger\u003e\n \u003cButton\u003eModal S\u003c/Button\u003e\n \u003cModal size=\"s\"\u003e\n \u003cHeading\u003e\n Möchtest du die Bestellung wirklich abbrechen?\n \u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cText\u003e\n Deine eingegebenen Daten werden nicht\n gespeichert.\n \u003c/Text\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"danger\"\u003e\n Bestellung abbrechen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Bestellung fortsetzen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n \u003c/ModalTrigger\u003e\n\n \u003cModalTrigger\u003e\n \u003cButton\u003eModal M\u003c/Button\u003e\n \u003cModal size=\"m\"\u003e\n \u003cHeading\u003e\n \u003cIconBackup /\u003e\n \u003cText\u003eBackup anlegen\u003c/Text\u003e\n \u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cText\u003e\n Das Backup enthält alle Dateien deines\n Dateisystems und den Inhalt deiner\n Datenbanken. Dei Erstellung eines Backups\n dauert in der Regel einige Minuten.\n \u003c/Text\u003e\n \u003cColumnLayout m={[1, 1]}\u003e\n \u003cTextField\u003e\n \u003cLabel\u003eBeschreibung\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cSelect isRequired\u003e\n \u003cLabel\u003eSpeicherdauer\u003c/Label\u003e\n \u003cOption\u003e7 Tage\u003c/Option\u003e\n \u003cOption\u003e14 Tage\u003c/Option\u003e\n \u003cOption\u003e30 Tage\u003c/Option\u003e\n \u003cOption\u003e6 Monate\u003c/Option\u003e\n \u003cOption\u003e12 Monate\u003c/Option\u003e\n \u003c/Select\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"accent\"\u003e\n Backup anlegen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"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\n \u003cModalTrigger\u003e\n \u003cButton\u003eOffCanvas S\u003c/Button\u003e\n \u003cModal size=\"s\" offCanvas\u003e\n \u003cHeading\u003e\n \u003cIconSettings /\u003e\n Dashboard-Einstellungen\n \u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cHeading\u003eWidget-Sichtbarkeit\u003c/Heading\u003e\n \u003cText\u003e\n Aktiviere und deaktiviere die Widgets, die\n du wirklich benötigst. So bestimmst du\n selbst, wie dein Dashboard aussehen soll.\n \u003c/Text\u003e\n \u003cdiv\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"32px\",\n }}\n \u003e\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch\u003eErste Schritte\u003c/Switch\u003e\n \u003cText\u003e\n Im Onboarding erklären wir dir alles\n Wichtige im mStudio.\n \u003c/Text\u003e\n \u003cLink\u003eErste Schritte starten\u003c/Link\u003e\n \u003c/ColumnLayout\u003e\n\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch defaultSelected\u003e\n mittwald Status\n \u003c/Switch\u003e\n \u003cText\u003e\n Wir informieren dich über Wartung und\n Störungen.\n \u003c/Text\u003e\n \u003c/ColumnLayout\u003e\n\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch\u003emittwald Produkt-Slider\u003c/Switch\u003e\n \u003cText\u003e\n Im Produkt-Slider erhälst du\n Informationen und einen schnellen\n Einstieg in weitere mittwald Produkte.\n \u003c/Text\u003e\n \u003c/ColumnLayout\u003e\n\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch defaultSelected\u003e\n Neue Features\n \u003c/Switch\u003e\n \u003cText\u003e\n Wir entwickeln das mStudio stetig weiter\n Alle kommenden Features findest du auf\n der \u003cLink\u003eRoadmap\u003c/Link\u003e.\n \u003c/Text\u003e\n \u003cLink\u003eChangelog öffnen\u003c/Link\u003e\n \u003c/ColumnLayout\u003e\n\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch defaultSelected\u003e\n Neue Blogbeiträge\n \u003c/Switch\u003e\n \u003cText\u003e\n Wir zeigen dir den neuesten mittwald\n Blogartikel an.\n \u003c/Text\u003e\n \u003cLink\u003eBlogartikel öffnen\u003c/Link\u003e\n \u003c/ColumnLayout\u003e\n\n \u003cColumnLayout s={[1]} gap=\"s\"\u003e\n \u003cSwitch\u003eLastschift Hinweis\u003c/Switch\u003e\n \u003cText\u003e\n Wir informieren über die neue\n Möglichkeit, deine Rechnungen per\n Lastschrift zu bezahlen.\n \u003c/Text\u003e\n \u003c/ColumnLayout\u003e\n \u003c/div\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Schließen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003c/ActionGroup\u003e\n \u003c/Modal\u003e\n \u003c/ModalTrigger\u003e\n\n \u003cModalTrigger\u003e\n \u003cButton\u003eOffCanvas M\u003c/Button\u003e\n \u003cModal size=\"m\" offCanvas\u003e\n \u003cHeading\u003e\n \u003cIconSshSftp /\u003e\n SFTP-Benutzer anlegen\n \u003c/Heading\u003e\n \u003cContent\u003e\n \u003cSection\u003e\n \u003cHeading\u003eBeschreibung\u003c/Heading\u003e\n \u003cText\u003e\n Mit einem SFTP-Benutzer kannst du dich mit\n deinem Projekt verbinden, um z.B. Dateien\n hochzuladen.\n \u003c/Text\u003e\n \u003cColumnLayout m={[1, 1]}\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003cDatePicker\u003e\n \u003cLabel\u003eAblaufdatum\u003c/Label\u003e\n \u003cFieldDescription\u003e\n Nach diesem Datum wird der SFTP-Benutzer\n gelöscht.\n \u003c/FieldDescription\u003e\n \u003c/DatePicker\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeading\u003eAuthentifizierung\u003c/Heading\u003e\n \u003cText\u003e\n Wähle zwischen der Authentifikation per\n Passwort oder über einen SSH-Key.\n \u003c/Text\u003e\n \u003cSegmentedControl value=\"password\"\u003e\n \u003cSegment value=\"password\"\u003ePasswort\u003c/Segment\u003e\n \u003cSegment value=\"ssh\"\u003eSSH-Key\u003c/Segment\u003e\n \u003c/SegmentedControl\u003e\n \u003cColumnLayout s={[1, 1]}\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003ePasswort\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/ColumnLayout\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeading\u003eBerechtigungen\u003c/Heading\u003e\n \u003cText\u003e\n Wähle hier die Berechtigungen aus, mit denen\n der SFTP-Benutzer zugreifen darf.\n \u003c/Text\u003e\n \u003cRadioGroup\n s={[1, 1]}\n defaultValue=\"read\u0026write\"\n \u003e\n \u003cRadioButton value=\"write\"\u003e\n \u003cText\u003eLesezugriff\u003c/Text\u003e\n \u003cContent\u003e\n Der SFTP-Benutzer kann Dateien einsehen\n und herunterladen.\n \u003c/Content\u003e\n \u003c/RadioButton\u003e\n \u003cRadioButton value=\"read\u0026write\"\u003e\n \u003cText\u003eLese- und Schreibzugriff\u003c/Text\u003e\n \u003cContent\u003e\n Der SFTP-Benutzer kann Dateien einsehen,\n bearbeiten, hoch und herunterladen.\n \u003c/Content\u003e\n \u003c/RadioButton\u003e\n \u003c/RadioGroup\u003e\n \u003c/Section\u003e\n \u003cSection\u003e\n \u003cHeading\u003eVerzeichnisauswahl\u003c/Heading\u003e\n \u003cText\u003e\n Hier legst du das Verzeichnis fest, auf das\n der SFTP-Benutzer Zugriff hat.\n \u003c/Text\u003e\n \u003cTextField isRequired\u003e\n \u003cLabel\u003ePfad\u003c/Label\u003e\n \u003c/TextField\u003e\n \u003c/Section\u003e\n \u003c/Content\u003e\n \u003cActionGroup\u003e\n \u003cAction closeOverlay=\"Modal\"\u003e\n \u003cAction action={sleepLong}\u003e\n \u003cButton color=\"accent\"\u003e\n SFTP-Benutzer anlegen\n \u003c/Button\u003e\n \u003c/Action\u003e\n \u003cButton variant=\"soft\" color=\"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 \u003c/Row\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"32:T470,import {\n Alert,\n Content,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\u003cRow\u003e\n \u003cAlert status=\"info\"\u003e\n \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n \u003cContent\u003e\n Da deine Domain gelöscht wurde, wurde diese\n E-Mail-Adresse archiviert. Um E-Mails empfangen und\n senden zu können musst du die Adresse wieder\n umbenennen.\n \u003c/Content\u003e\n \u003c/Alert\u003e\n\n \u003cAlert status=\"warning\"\u003e\n \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n \u003cContent\u003e\n Dein Speicher ist zu über 80% belegt. Wir empfehlen\n dir deinen Speicherplatz zu erweitern, um Problemen\n vorzubeugen.\n \u003c/Content\u003e\n \u003c/Alert\u003e\n\n \u003cAlert status=\"danger\"\u003e\n \u003cHeading\u003e\n Es konnte kein SSL-Zertifikat ausgestellt werden\n \u003c/Heading\u003e\n \u003cContent\u003e\n Für diese Domain konnte kein SSL-Zertifikat\n ausgestellt werden, da die Domain per IP nicht auf\n deine Server-IP zeigt.\n \u003c/Content\u003e\n \u003c/Alert\u003e\n\n \u003cAlert status=\"success\"\u003e\n \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n \u003cContent\u003e\n Deine App wurde erfolgreich auf die neueste Version\n aktualisiert.\n \u003c/Content\u003e\n \u003c/Alert\u003e\n\u003c/Row\u003e;\n33:T650,import {\n ActionGroup,\n AlertBadge,\n Avatar,\n Button,\n ContextMenu,\n Heading,\n IconDomain,\n IconDownload,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cActionGroup\u003e\n \u003cButton\n color=\"secondary\"\n variant=\"soft\"\n slot=\"secondary\"\n \u003e\n \u003cIconDownload /\u003e\n \u003c/Button\u003e\n \u003cButton color=\"accent\"\u003eAnlegen\u003c/Button\u003e\n \u003c/ActionGroup\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n "])</script><script>self.__next_f.push([1," }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n34:T5b6,import {\n Avatar,\n Checkbox,\n Heading,\n IconDomain,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const List = typedList\u003cDomain\u003e();\n\n return (\n \u003cList.List batchSize={4}\u003e\n \u003cList.StaticData data={domains} /\u003e\n \u003cList.Item showTiles\u003e\n {(domain) =\u003e (\n \u003cList.ItemView\u003e\n \u003cCheckbox\n aria-label={`${domain.hostname} auswählen`}\n /\u003e\n \u003cAvatar\u003e\n \u003cIconDomain /\u003e\n \u003c/Avatar\u003e\n \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n \u003c/List.ItemView\u003e\n )}\n \u003c/List.Item\u003e\n\n \u003cList.Table\u003e\n \u003cList.TableHeader\u003e\n \u003cList.TableColumn\u003e\n \u003cCheckbox aria-label=\"Alle auswählen\" /\u003e\n \u003c/List.TableColumn\u003e\n \u003cList.TableColumn\u003eDomain\u003c/List.TableColumn\u003e\n \u003c/List.TableHeader\u003e\n \u003cList.TableBody\u003e\n \u003cList.TableRow\u003e\n \u003cList.TableCell\u003e\n {(domain) =\u003e (\n \u003cCheckbox\n aria-label={`${domain.hostname} auswählen`}\n /\u003e\n )}\n \u003c/List.TableCell\u003e\n \u003cList.TableCell\u003e\n {(domain) =\u003e dom"])</script><script>self.__next_f.push([1,"ain.hostname}\n \u003c/List.TableCell\u003e\n \u003c/List.TableRow\u003e\n \u003c/List.TableBody\u003e\n \u003c/List.Table\u003e\n \u003c/List.List\u003e\n );\n};\n35:Tdfa,"])</script><script>self.__next_f.push([1,"import {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n type SortingFn,\n SortingFunctions,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport { DateTime } from \"luxon\";\n\nexport default () =\u003e {\n type DomainWithBigIntId = Omit\u003cDomain, \"id\"\u003e \u0026 {\n id: bigint;\n createdAt: DateTime;\n };\n\n const domainsWithDateTime = domains.map(\n (domain, index) =\u003e {\n const daysAgo =\n index * 3 + Math.floor(Math.random() * 5);\n\n const bigIntId = BigInt(1000000000000 + index);\n\n return {\n ...domain,\n id: bigIntId,\n createdAt: DateTime.now().minus({ days: daysAgo }),\n };\n },\n );\n\n const DomainList = typedList\u003cDomainWithBigIntId\u003e();\n\n const bigIntSorting =\n SortingFunctions.bigInt as SortingFn\u003cDomainWithBigIntId\u003e;\n const dateTimeSorting =\n SortingFunctions.dateTime as SortingFn\u003cDomainWithBigIntId\u003e;\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domainsWithDateTime} /\u003e\n\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Name A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Name Z bis A\"\n direction=\"desc\"\n /\u003e\n\n \u003cDomainList.Sorting\n property=\"id\"\n name=\"ID (aufsteigend)\"\n direction=\"asc\"\n customSortingFn={bigIntSorting}\n /\u003e\n \u003cDomainList.Sorting\n property=\"id\"\n name=\"ID (absteigend)\"\n direction=\"desc\"\n customSortingFn={bigIntSorting}\n defaultEnabled\n /\u003e\n\n \u003cDomainList.Sorting\n property=\"createdAt\"\n name=\"Erstellt am (älteste zuerst)\"\n direction=\"asc\"\n customSortingFn={dateTimeSorting}\n /\u003e\n \u003cDomainList.Sorting\n property=\"createdAt\"\n name=\"Erstellt am (neueste zuerst)\"\n direction=\"desc\"\n customSortingFn={dateTimeSorting}\n /\u003e\n\n \u003cDomainList.Sorting\n property=\"tld\"\n name=\"TLD-Länge (kürzeste zuerst)\"\n direction=\"asc\"\n customSortingFn={(rowA, rowB, columnId: string) =\u003e {\n const tldA = String(\n rowA.getValue(columnId) || \"\",\n );\n const tldB = String(\n rowB.getValue(columnId) || \"\",\n );\n return tldA.length - tldB.length;\n }}\n /\u003e\n\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n \u003cText\u003eID: {domain.id}\u003c/Text\u003e\n \u003cText\u003eTLD: {domain.tld}\u003c/Text\u003e\n \u003cText\u003e\n Erstellt am:{\" \"}\n {domain.createdAt.toLocaleString()}\n \u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"36:Tcb3,"])</script><script>self.__next_f.push([1,"import {\n ActionGroup,\n AlertBadge,\n Avatar,\n Button,\n ContextMenu,\n Heading,\n IconDomain,\n IconDownload,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cActionGroup\u003e\n \u003cButton\n color=\"secondary\"\n variant=\"soft\"\n slot=\"secondary\"\n \u003e\n \u003cIconDownload /\u003e\n \u003c/Button\u003e\n \u003cButton color=\"accent\"\u003eAnlegen\u003c/Button\u003e\n \u003c/ActionGroup\u003e\n \u003cDomainList.Search /\u003e\n \u003cDomainList.Filter\n property=\"type\"\n mode=\"some\"\n name=\"Type\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Table\u003e\n \u003cDomainList.TableHeader\u003e\n \u003cDomainList.TableColumn\u003e\n Name\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Type\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n TLD\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Hostname\n \u003c/DomainList.TableColumn\u003e\n \u003c/DomainList.TableHeader\u003e\n\n \u003cDomainList.TableBody\u003e\n \u003cDomainList.TableRow\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.domain}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.type}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.tld}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.hostname}\n \u003c/DomainList.TableCell\u003e\n \u003c/DomainList.TableRow\u003e\n \u003c/DomainList.TableBody\u003e\n \u003c/DomainList.Table\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"37:T599,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Filter\n property=\"type\"\n mode=\"some\"\n name=\"Type\"\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n38:T669,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={2}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Filter\n property=\"verified\"\n mode=\"some\"\n name=\"Status\"\n values={[\"Verifiziert\", \"Unverifiziert\"]}\n matcher={(filterV"])</script><script>self.__next_f.push([1,"alue, verified) =\u003e {\n return filterValue === \"Verifiziert\"\n ? verified\n : !verified;\n }}\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n39:T74e,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={2}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Filter\n property=\"verified\"\n mode=\"some\"\n name=\"Status\"\n values={[\"Verifiziert\", \"Unverifiziert\"]}\n matcher={(filterValue, verified) =\u003e {\n return filterValue === \"Verifiziert\"\n ? verified\n : !verified;\n }}\n /\u003e\n \u003cDomainList.Filter\n property=\"id\"\n mode=\"some\"\n name=\"Filter\"\n values={[\n \"SSL Zertifikat abgelaufen\",\n \"Kein Ziel hinterlegt\",\n ]}\n matcher={() =\u003e true}\n /\u003e\n \u003cDomainList.Item\u003e\n {("])</script><script>self.__next_f.push([1,"domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n3a:T43f,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n List,\n ListItem,\n ListItemView,\n ListStaticData,\n MenuItem,\n Text,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\n\u003cList batchSize={2}\u003e\n \u003cListStaticData data={domains} /\u003e\n \u003cListItem\u003cDomain\u003e\u003e\n {(domain) =\u003e (\n \u003cListItemView\u003e\n \u003cAvatar\n color={domain.type === \"Domain\" ? \"blue\" : \"teal\"}\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/ListItemView\u003e\n )}\n \u003c/ListItem\u003e\n\u003c/List\u003e;\n3b:Tcb3,"])</script><script>self.__next_f.push([1,"import {\n ActionGroup,\n AlertBadge,\n Avatar,\n Button,\n ContextMenu,\n Heading,\n IconDomain,\n IconDownload,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={2}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cActionGroup\u003e\n \u003cButton\n color=\"secondary\"\n variant=\"soft\"\n slot=\"secondary\"\n \u003e\n \u003cIconDownload /\u003e\n \u003c/Button\u003e\n \u003cButton color=\"accent\"\u003eAnlegen\u003c/Button\u003e\n \u003c/ActionGroup\u003e\n \u003cDomainList.Search /\u003e\n \u003cDomainList.Filter\n property=\"type\"\n mode=\"some\"\n name=\"Type\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Table\u003e\n \u003cDomainList.TableHeader\u003e\n \u003cDomainList.TableColumn\u003e\n Name\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Type\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n TLD\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Hostname\n \u003c/DomainList.TableColumn\u003e\n \u003c/DomainList.TableHeader\u003e\n\n \u003cDomainList.TableBody\u003e\n \u003cDomainList.TableRow\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.domain}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.type}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.tld}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.hostname}\n \u003c/DomainList.TableCell\u003e\n \u003c/DomainList.TableRow\u003e\n \u003c/DomainList.TableBody\u003e\n \u003c/DomainList.Table\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"3c:T750,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Filter\n property=\"type\"\n mode=\"some\"\n name=\"Type\"\n values={[\"Domain\", \"Subdomain\"]}\n defaultSelected={[\"Domain\"]}\n /\u003e\n \u003cDomainList.Filter\n property=\"verified\"\n mode=\"some\"\n name=\"Verifizierung\"\n matcher={(filterValue, propertyValue) =\u003e\n filterValue === \"Verifiziert\"\n ? propertyValue\n : !propertyValue\n }\n defaultSelected={[\"Unverifiziert\"]}\n values={[\"Verifiziert\", \"Unverifiziert\"]}\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n3d:T86e,"])</script><script>self.__next_f.push([1,"import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Filter\n property=\"type\"\n mode=\"some\"\n name=\"Type\"\n matcher={(filterValue, propertyValue) =\u003e\n filterValue === \"Type Domain\"\n ? propertyValue === \"Domain\"\n : propertyValue === \"Subdomain\"\n }\n values={[\"Type Domain\", \"Type Subdomain\"]}\n defaultSelected={[\"Type Domain\"]}\n /\u003e\n \u003cDomainList.Filter\n property=\"verified\"\n mode=\"some\"\n name=\"Verifizierung\"\n matcher={(filterValue, propertyValue) =\u003e\n filterValue === \"Verifizierung Verifiziert\"\n ? propertyValue\n : !propertyValue\n }\n defaultSelected={[\"Verifizierung Unverifiziert\"]}\n values={[\n \"Verifizierung Verifiziert\",\n \"Verifizierung Unverifiziert\",\n ]}\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"3e:T537,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={3}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n3f:T553,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Search /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type ==="])</script><script>self.__next_f.push([1," \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n40:T701,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Domain Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"type\"\n name=\"Type Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cA"])</script><script>self.__next_f.push([1,"lertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n41:T710,import {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Name A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"hostname\"\n name=\"Name Z bis A\"\n direction=\"desc\"\n defaultEnabled\n /\u003e\n \u003cDomainList.Sorting\n property=\"tld\"\n name=\"TLD A bis Z\"\n direction=\"asc\"\n /\u003e\n \u003cDomainList.Sorting\n property=\"tld\"\n name=\"TLD Z bis A\"\n direction=\"desc\"\n /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anze"])</script><script>self.__next_f.push([1,"igen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n42:T5d6,import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5}\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Sorting\n property=\"domain\"\n name=\"Name\"\n defaultEnabled\n /\u003e\n \u003cDomainList.Sorting property=\"tld\" name=\"TLD\" /\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n43:T4ac,import {\n Heading,\n ListItemView,\n ListSummary,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\n\nexport default () =\u003e {\n const InvoiceList = typedList\u003c{\n id: string;\n date: string;\n amount: string;\n }\u003e();\n\n return (\n \u003cInvoiceList.List batchSize={5} aria-label=\"Invoices\"\u003e\n \u003cListSummary\u003e\n \u003cText\n st"])</script><script>self.__next_f.push([1,"yle={{ display: \"block\", textAlign: \"right\" }}\n \u003e\n \u003cb\u003eGesamt: 41,00 €\u003c/b\u003e\n \u003c/Text\u003e\n \u003c/ListSummary\u003e\n \u003cInvoiceList.StaticData\n data={[\n {\n id: \"RG100000\",\n date: \"1.9.2024\",\n amount: \"25,00 €\",\n },\n {\n id: \"RG100001\",\n date: \"12.9.2024\",\n amount: \"12,00 €\",\n },\n {\n id: \"RG100002\",\n date: \"3.10.2024\",\n amount: \"4,00 €\",\n },\n ]}\n /\u003e\n\n \u003cInvoiceList.Item\u003e\n {(invoice) =\u003e (\n \u003cListItemView\u003e\n \u003cHeading\u003e{invoice.id}\u003c/Heading\u003e\n \u003cText\u003e\n {invoice.date} - {invoice.amount}\n \u003c/Text\u003e\n \u003c/ListItemView\u003e\n )}\n \u003c/InvoiceList.Item\u003e\n \u003c/InvoiceList.List\u003e\n );\n};\n44:T96a,"])</script><script>self.__next_f.push([1,"import {\n AlertBadge,\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={5} defaultViewMode=\"table\"\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Table\u003e\n \u003cDomainList.TableHeader\u003e\n \u003cDomainList.TableColumn\u003e\n Name\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Type\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n TLD\n \u003c/DomainList.TableColumn\u003e\n \u003cDomainList.TableColumn\u003e\n Hostname\n \u003c/DomainList.TableColumn\u003e\n \u003c/DomainList.TableHeader\u003e\n\n \u003cDomainList.TableBody\u003e\n \u003cDomainList.TableRow\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.domain}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.type}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.tld}\n \u003c/DomainList.TableCell\u003e\n \u003cDomainList.TableCell\u003e\n {(domain) =\u003e domain.hostname}\n \u003c/DomainList.TableCell\u003e\n \u003c/DomainList.TableRow\u003e\n \u003c/DomainList.TableBody\u003e\n \u003c/DomainList.Table\u003e\n \u003cDomainList.Item\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e\n {domain.hostname}\n {!domain.verified \u0026\u0026 (\n \u003cAlertBadge status=\"warning\"\u003e\n Unverifiziert\n \u003c/AlertBadge\u003e\n )}\n \u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n"])</script><script>self.__next_f.push([1,"45:T48d,import {\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n IconSubdomain,\n MenuItem,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\n\nexport default () =\u003e {\n const DomainList = typedList\u003cDomain\u003e();\n\n return (\n \u003cDomainList.List batchSize={6} defaultViewMode=\"tiles\"\u003e\n \u003cDomainList.StaticData data={domains} /\u003e\n \u003cDomainList.Item showTiles\u003e\n {(domain) =\u003e (\n \u003cDomainList.ItemView\u003e\n \u003cAvatar\n color={\n domain.type === \"Domain\" ? \"blue\" : \"teal\"\n }\n \u003e\n {domain.type === \"Domain\" ? (\n \u003cIconDomain /\u003e\n ) : (\n \u003cIconSubdomain /\u003e\n )}\n \u003c/Avatar\u003e\n \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n \u003cText\u003e{domain.type}\u003c/Text\u003e\n\n \u003cContextMenu\u003e\n \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/DomainList.ItemView\u003e\n )}\n \u003c/DomainList.Item\u003e\n \u003c/DomainList.List\u003e\n );\n};\n46:T448,import {\n AlertBadge,\n Button,\n ColumnLayout,\n Content,\n CopyButton,\n Header,\n Heading,\n IconContextMenu,\n IconExternalLink,\n Label,\n LabeledValue,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003e\n Mein Projekt\n \u003cAlertBadge status=\"danger\"\u003e\n Fehlende Vertragspartnerdaten\n \u003c/AlertBadge\u003e\n \u003c/Heading\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n \u003cIconContextMenu /\u003e\n \u003c/Button\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n Datenbank migrieren\n \u003c/Button\u003e\n \u003c/Header\u003e\n\n \u003cColumnLayout\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProjektname\u003c/Label\u003e\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\n \u003cContent\u003ep-lol3qe\u003c/Content\u003e\n \u003cCopyButton text=\"p-lol3qe\" /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003c"])</script><script>self.__next_f.push([1,"Label\u003eProjektdomain\u003c/Label\u003e\n \u003cLink\u003e\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\n \u003cIconExternalLink /\u003e\n \u003c/Link\u003e\n \u003cCopyButton text=\"p-lol3qe.project.space\" /\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n\u003c/Section\u003e;\n47:T4be,import {\n Button,\n ColumnLayout,\n Content,\n ContextMenu,\n ContextMenuTrigger,\n CopyButton,\n Header,\n Heading,\n IconContextMenu,\n IconExternalLink,\n Label,\n LabeledValue,\n Link,\n MenuItem,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\u003cSection\u003e\n \u003cHeader\u003e\n \u003cHeading\u003eMein Projekt\u003c/Heading\u003e\n\n \u003cContextMenuTrigger\u003e\n \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n \u003cIconContextMenu /\u003e\n \u003c/Button\u003e\n \u003cContextMenu aria-label=\"Weitere Aktionen\"\u003e\n \u003cMenuItem\u003eDatenbank migrieren\u003c/MenuItem\u003e\n \u003cMenuItem\u003eVolume migrieren\u003c/MenuItem\u003e\n \u003c/ContextMenu\u003e\n \u003c/ContextMenuTrigger\u003e\n\n \u003cButton color=\"danger\"\u003eDeaktivieren\u003c/Button\u003e\n \u003c/Header\u003e\n\n \u003cColumnLayout\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProjektname\u003c/Label\u003e\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\n \u003cContent\u003ep-lol3qe\u003c/Content\u003e\n \u003cCopyButton text=\"p-lol3qe\" /\u003e\n \u003c/LabeledValue\u003e\n \u003cLabeledValue\u003e\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\n \u003cLink\u003e\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\n \u003cIconExternalLink /\u003e\n \u003c/Link\u003e\n \u003cCopyButton text=\"p-lol3qe.project.space\" /\u003e\n \u003c/LabeledValue\u003e\n \u003c/ColumnLayout\u003e\n\u003c/Section\u003e;\n48:T484,import {\n InlineCode,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from \"@mittwald/flow-react-components\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n \u003cTableHeader\u003e\n \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n \u003c/TableHeader\u003e\n \u003cTableBody\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003e\n \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n \u003c/TableCell\u003e\n \u003cTableCell\u003e\n primary | accent | secondary | danger\n \u003c/TableCell\u003e\n \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n"])</script><script>self.__next_f.push([1," \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003e\n \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n \u003c/TableCell\u003e\n \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n \u003cTableCell\u003esolid\u003c/TableCell\u003e\n \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n \u003c/TableRow\u003e\n \u003cTableRow\u003e\n \u003cTableCell\u003e\n \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n \u003c/TableCell\u003e\n \u003cTableCell\u003em | s\u003c/TableCell\u003e\n \u003cTableCell\u003em\u003c/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,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$L15\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"layout_homeLink__HdnFq\",\"children\":[\"$\",\"$L5\",null,{\"src\":\"/flow/_next/static/media/m-flow_logo.5d297ae4.svg\",\"alt\":\"mittwald Flow Logo\"}]}],[\"$\",\"$L16\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$17\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$18\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--alert\\\"\u003e\\n \u003ch3 className=\\\"flow--heading flow--heading--h3 flow--alert--heading\\\"\u003e\\n \u003cExampleSvg className=\\\"flow--icon flow--alert-icon\\\" /\u003e\\n E-Mail Adresse wurde archiviert\\n \u003c/h3\u003e\\n \u003cdiv className=\\\"flow--alert--content\\\"\u003e\\n Da deine Domain gelöscht wurde, wurde diese\\n E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n senden zu können musst du die Adresse wieder umbenennen.\\n \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent flow--button--size-s\\\"\u003e\\n Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Design Tokens übersetzen grundlegende Designentscheidungen wie Farben, Abstände\\\\nund mehr in eine einheitliche Sprache. Entwickler und Designer nutzen diese\\\\nSprache, um ein konsistentes, skalierbares und wiederverwendbares Design in der\\\\ngesamten Benutzeroberfläche sicherzustellen.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Design Tokens\"},\"scope\":{}},\"examples\":{\"schema\":\"import {\\n Badge,\\n ColumnLayout,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[1, 1, 1]}\u003e\\n \u003cText\u003e\\n \u003cBadge color=\\\"teal\\\"\u003eContext\u003c/Badge\u003e\\n Einordnung \u003cbr /\u003e\\n \u003csmall\u003ez. B. Farbe, Component\u003c/small\u003e\\n \u003c/Text\u003e\\n \u003cText\u003e\\n \u003cBadge color=\\\"orange\\\"\u003eCommon Unit\u003c/Badge\u003e\\n Kategorie \u003cbr /\u003e\\n \u003csmall\u003ez. B. Variante, Sizing, Styling\u003c/small\u003e\\n \u003c/Text\u003e\\n \u003cText\u003e\\n \u003cBadge color=\\\"lilac\\\"\u003eClarification\u003c/Badge\u003e\\n Spezifizierung \u003cbr /\u003e\\n \u003csmall\u003ez. B. Farbwert, State\u003c/small\u003e\\n \u003c/Text\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-foundations\",\"01-design\",\"01-design-tokens\"],\"filename\":\"02-foundations/01-design/01-design-tokens/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Ausgewählte Colors verkörpern die Marke und dienen gleichzeitig als wesentliches\\\\nKommunikationsmittel in der Benutzeroberfläche. Sie lenken die Aufmerksamkeit\\\\ndes Users und vermitteln gezielt wichtige Informationen wie z. B. den Status.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Color\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"01-design\",\"02-colors\"],\"filename\":\"02-foundations/01-design/02-colors/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Typography strukturiert den Inhaltsbereich, indem sie eine visuelle Hierarchie\\\\nschafft. Darüber hinaus erhöht eine gute Typography die Lesbarkeit und stärkt\\\\ndie Marke im Erscheinungsbild.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Typography\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"01-design\",\"05-typography\"],\"filename\":\"02-foundations/01-design/05-typography/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Das Layout organisiert die Benutzeroberfläche in einer logischen und\\\\nhierarchischen Struktur, um die Aufmerksamkeit des Users gezielt zu lenken.\\\\nDabei werden Elemente wie Header, Navigation und Content-Bereich berücksichtigt.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Layout\"},\"scope\":{}},\"examples\":{\"general-layout\":\"$19\",\"mStudio-layout\":\"$1a\"},\"slugs\":[\"02-foundations\",\"02-structure\",\"01-layout\"],\"filename\":\"02-foundations/02-structure/01-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Spacing definiert die vertikalen und horizontalen Abstände zwischen Elementen\\\\nund sorgt so für ein harmonisches Layout.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Spacing\"},\"scope\":{}},\"examples\":{\"falseSpacing\":\"import {\\n Avatar,\\n Content,\\n Initials,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContent\\n style={{\\n display: \\\"grid\\\",\\n gridTemplateAreas: '\\\"avatar title\\\" \\\"avatar subtitle\\\"',\\n gridTemplateColumns: \\\"auto 1fr\\\",\\n alignItems: \\\"center\\\",\\n columnGap: \\\"32px\\\",\\n width: \\\"max-content\\\",\\n marginLeft: \\\"auto\\\",\\n marginRight: \\\"auto\\\",\\n }}\\n\u003e\\n \u003cdiv\\n style={{\\n gridArea: \\\"avatar\\\",\\n }}\\n \u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eSven Fuchs\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/div\u003e\\n \u003cText\\n style={{\\n gridArea: \\\"title\\\",\\n }}\\n \u003e\\n \u003cb style={{ margin: 0 }}\u003eSven Fuchs\u003c/b\u003e\\n \u003c/Text\u003e\\n \u003cText\\n style={{\\n gridArea: \\\"subtitle\\\",\\n fontSize: \\\"14px\\\",\\n }}\\n \u003e\\n Projektentwickler\\n \u003c/Text\u003e\\n\u003c/Content\u003e;\\n\",\"rightSpacing\":\"import {\\n Avatar,\\n Content,\\n Initials,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContent\\n style={{\\n display: \\\"grid\\\",\\n gridTemplateAreas: '\\\"avatar title\\\" \\\"avatar subtitle\\\"',\\n gridTemplateColumns: \\\"auto 1fr\\\",\\n alignItems: \\\"center\\\",\\n columnGap: \\\"8px\\\",\\n width: \\\"max-content\\\",\\n marginLeft: \\\"auto\\\",\\n marginRight: \\\"auto\\\",\\n }}\\n\u003e\\n \u003cdiv\\n style={{\\n gridArea: \\\"avatar\\\",\\n }}\\n \u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eSven Fuchs\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/div\u003e\\n \u003cText\\n style={{\\n gridArea: \\\"title\\\",\\n }}\\n \u003e\\n \u003cb style={{ margin: 0 }}\u003eSven Fuchs\u003c/b\u003e\\n \u003c/Text\u003e\\n \u003cText\\n style={{\\n gridArea: \\\"subtitle\\\",\\n fontSize: \\\"14px\\\",\\n }}\\n \u003e\\n Projektentwickler\\n \u003c/Text\u003e\\n\u003c/Content\u003e;\\n\"},\"slugs\":[\"02-foundations\",\"02-structure\",\"02-spacing\"],\"filename\":\"02-foundations/02-structure/02-spacing/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Erfahre, was unsere Sprache auszeichnet und an welchen Leitlinien du dich bei\\\\ndeinen Texten orientieren kannst. Außerdem erklärt unser Glossar alle Begriffe,\\\\nauf die du im mStudio Kontext treffen kannst.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Sprach-Guide\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"03-content-guidelines\",\"01-sprach-guide\"],\"filename\":\"02-foundations/03-content-guidelines/01-sprach-guide/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Fehler entstehen, wenn User auf unerwartete Ergebnisse stoßen – das führt oft zu\\\\nFrustration, Verwirrung und zusätzlichem Aufwand. Daher ist der beste Fehler\\\\nder, der gar nicht erst auftritt. Sollte dennoch ein Fehler auftreten, muss die\\\\nFehlermeldung klar, hilfreich und leicht verständlich formuliert sein, um den\\\\nUser bestmöglich zu unterstützen.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Fehlermeldungen\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"03-content-guidelines\",\"02-fehlermeldungen\"],\"filename\":\"02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Ein Dashboard zeigt dem User relevante Informationen übersichtlich in kleineren\\\\nBereichen auf einer einzigen Oberfläche an. Es hilft dem User, wichtige Daten\\\\nschnell zu erkennen.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Dashboard\"},\"scope\":{}},\"examples\":{\"dashboard\":\"$1b\"},\"slugs\":[\"02-foundations\",\"04-ui-patterns\",\"01-dashboard\"],\"filename\":\"02-foundations/04-ui-patterns/01-dashboard/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Anlege-Prozesse fügen ein neues Element zur Benutzeroberfläche hinzu. Kleinere\\\\nAnlege-Prozesse erfolgen in einem Standard-Modal. Umfangreichere Anlege- oder\\\\nBuchungsprozesse werden hingegen in einem Modal mit OffCanvas-Variante\\\\ndargestellt.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Anlegeprozess\"},\"scope\":{}},\"examples\":{\"content\":\"$1c\",\"empty\":\"$1d\"},\"slugs\":[\"02-foundations\",\"04-ui-patterns\",\"02-anlegeprozess\"],\"filename\":\"02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Inhalte sollten so strukturiert werden, dass User schnell und einfach alle\\\\nwichtigen Informationen finden können. Dafür gibt es Components, die auf die\\\\nLayout- und Strukturierung der Darstellung spezialisiert sind.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Content strukturieren\"},\"scope\":{}},\"examples\":{\"detail-page\":\"$1e\"},\"slugs\":[\"02-foundations\",\"04-ui-patterns\",\"03-struktur\"],\"filename\":\"02-foundations/04-ui-patterns/03-struktur/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const _components = {\\n p: \\\"p\\\",\\n ..._provideComponents(),\\n ...props.components\\n };\\n return _jsx(_components.p, {\\n children: \\\"Im Content-Bereich verschiedener Seiten werden häufig Daten angezeigt, die der\\\\nUser bearbeiten kann. Die Bearbeitung erfolgt dabei nicht direkt im\\\\nContent-Bereich, sondern durch das Öffnen eines separaten Modals.\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\n\",\"frontmatter\":{\"title\":\"Bearbeitungsprozess\"},\"scope\":{}},\"examples\":{\"edit-section\":\"$1f\"},\"slugs\":[\"02-foundations\",\"04-ui-patterns\",\"04-bearbeitungsprozess\"],\"filename\":\"02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true,\\n zoom: 0.7\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n 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 {\\n ActionGroup,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cActionGroup\u003e\\n \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n Speichern und weitere anlegen\\n \u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import {\\n ActionGroup,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\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 {\\n ActionGroup,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cActionGroup\u003e\\n \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"info\":\"import {\\n ActionGroup,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cActionGroup\u003e\\n \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"link\":\"import {\\n ActionGroup,\\n Button,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cActionGroup\u003e\\n \u003cLink slot=\\\"abort\\\"\u003ePasswort vergessen?\u003c/Link\u003e\\n \u003cButton color=\\\"accent\\\"\u003eAnmelden\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\":\"import {\\n Action,\\n ActionGroup,\\n Button,\\n Content,\\n Heading,\\n Modal,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { sleepLong } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n \u003cModal slot=\\\"actionConfirm\\\"\u003e\\n \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\\n \u003cContent\u003e\\n Das Löschen eines Projektes kann nicht rückgängig\\n gemacht werden. Möchtest Du das Projekt\\n \u0026quot;Test\u0026quot; dennoch löschen?\\n \u003c/Content\u003e\\n \u003cActionGroup\u003e\\n \u003cButton color=\\\"danger\\\"\u003e\\n Unwiederbringlich löschen\\n \u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n \u003c/ActionGroup\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\",\"default\":\"import {\\n Action,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import {\\n Action,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAction\\n action={() =\u003e {\\n // do nothing\\n }}\\n showFeedback\\n\u003e\\n \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import {\\n Action,\\n Button,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { sleepLong } from \\\"@/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\":\"Mit einem Button können User Aktionen ausführen. Je nach Bedarf kann ein Button – mit Text und/oder mit einem Icon – in verschiedenen Größen und Typen gewählt werden.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eWeiterleitungsziel\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"colors\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"dark\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton color=\\\"dark\\\"\u003eDark\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n Dark\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n Dark\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"dark\\\"\u003e\\n Dark\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cButton\\n onPress={() =\u003e {\\n alert(\\\"Button gedrückt\\\");\\n }}\\n\u003e\\n Button\\n\u003c/Button\u003e;\\n\",\"hierarchy-order-do\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Pausieren\\n \u003c/Button\u003e\\n \u003cButton color=\\\"secondary\\\"\u003eStoppen\u003c/Button\u003e\\n \u003cButton\u003eStarten\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"hierarchy-order-dont\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton color=\\\"secondary\\\"\u003eStoppen\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Pausieren\\n \u003c/Button\u003e\\n \u003cButton\u003eStarten\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"hierarchy-soft-do\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Zurück\\n \u003c/Button\u003e\\n \u003cButton\u003eWeiter\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"hierarchy-solid-do\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton color=\\\"secondary\\\"\u003e\\n Speichern \u0026 weitere anlegen\\n \u003c/Button\u003e\\n \u003cButton color=\\\"accent\\\"\u003eAnlegen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"icon-clarity-do\":\"import {\\n Button,\\n IconFilter,\\n IconSorting,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cTextField value=\\\"Suche\\\" /\u003e\\n \u003cButton variant=\\\"plain\\\"\u003e\\n \u003cIconSorting /\u003e\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"plain\\\"\u003e\\n \u003cIconFilter /\u003e\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"outline\\\"\u003e\\n \u003cIconFilter /\u003e\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"icon-clarity-dont\":\"import {\\n Button,\\n Icon,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { IconCat, IconDog } from \\\"@tabler/icons-react\\\";\\n\\n\u003cRow\u003e\\n \u003cTextField value=\\\"Suche\\\" /\u003e\\n \u003cButton variant=\\\"plain\\\"\u003e\\n \u003cIcon\u003e\\n \u003cIconCat /\u003e\\n \u003c/Icon\u003e\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"plain\\\"\u003e\\n \u003cIcon\u003e\\n \u003cIconDog /\u003e\\n \u003c/Icon\u003e\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"outline\\\"\u003e\\n \u003cIcon\u003e\\n \u003cIconDog /\u003e\\n \u003c/Icon\u003e\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"icon-context-menu-do\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n Icon,\\n IconChevronDown,\\n IconEmail,\\n MenuItem,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { IconAt } from \\\"@tabler/icons-react\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton color=\\\"accent\\\"\u003e\\n \u003cText\u003eE-Mail-Addresse anlegen\u003c/Text\u003e\\n \u003cIconChevronDown /\u003e\\n \u003c/Button\u003e\\n \u003cContextMenu\u003e\\n \u003cMenuItem id=\\\"1\\\"\u003e\\n \u003cIcon\u003e\\n \u003cIconAt /\u003e\\n \u003c/Icon\u003e\\n \u003cText\u003eWeiterleitungsaddresse\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003e\\n \u003cIconEmail /\u003e\\n \u003cText\u003eE-Mail-Adresse\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import {\\n Button,\\n IconHome,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton size=\\\"s\\\" aria-label=\\\"Home\\\"\u003e\\n \u003cIconHome /\u003e\\n \u003c/Button\u003e\\n \u003cButton aria-label=\\\"Home\\\"\u003e\\n \u003cIconHome /\u003e\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"iconText\":\"import {\\n Button,\\n IconChevronDown,\\n IconClose,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton size=\\\"s\\\"\u003e\\n \u003cText\u003eE-Mail hinzufügen\u003c/Text\u003e\\n \u003cIconChevronDown /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cText\u003eE-Mail hinzufügen\u003c/Text\u003e\\n \u003cIconChevronDown /\u003e\\n \u003c/Button\u003e\\n \u003cButton size=\\\"s\\\"\u003e\\n \u003cText\u003eFilter\u003c/Text\u003e\\n \u003cIconClose /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cText\u003eFilter\u003c/Text\u003e\\n \u003cIconClose /\u003e\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"light\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton color=\\\"light\\\"\u003eLight\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n Light\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n Light\\n \u003c/Button\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"light\\\"\u003e\\n Light\\n \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"mobile-width-group-do\":\"import {\\n ActionGroup,\\n Button,\\n Heading,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cheader className=\\\"flow--modal--header\\\"\u003e\\n \u003cHeading\u003eProjekt anlegen\u003c/Heading\u003e\\n \u003c/header\u003e\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eProjekt Name\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cButton\u003eWeiter\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\",\"mobile-width-standard-do\":\"import {\\n Button,\\n HeaderNavigation,\\n Heading,\\n IconMenu,\\n IconSearch,\\n IconSupport,\\n LayoutCard,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection style={{ height: \\\"100%\\\" }}\u003e\\n \u003cHeaderNavigation\\n aria-label=\\\"Header navigation\\\"\\n color=\\\"light\\\"\\n style={{ alignSelf: \\\"flex-end\\\" }}\\n \u003e\\n \u003cButton\u003e\\n \u003cIconSearch /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cIconSupport /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cIconMenu /\u003e\\n \u003c/Button\u003e\\n \u003c/HeaderNavigation\u003e\\n \u003cButton color=\\\"accent\\\"\u003eProjekt anlegen\u003c/Button\u003e\\n \u003cLayoutCard style={{ width: \\\"100%\\\", flexGrow: \\\"1\\\" }}\u003e\\n \u003cHeading\u003eProjekte\u003c/Heading\u003e\\n \u003cText\u003e...\u003c/Text\u003e\\n \u003c/LayoutCard\u003e\\n\u003c/Section\u003e;\\n\",\"position-info\":\"import {\\n Button,\\n Heading,\\n LayoutCard,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cButton color=\\\"accent\\\" style={{ alignSelf: \\\"flex-end\\\" }}\u003e\\n App anlegen\\n \u003c/Button\u003e\\n \u003cLayoutCard style={{ width: \\\"100%\\\" }}\u003e\\n \u003cSection\u003e\\n \u003cHeading\u003eApps\u003c/Heading\u003e\\n \u003cText\u003e...\u003c/Text\u003e\\n \u003c/Section\u003e\\n \u003c/LayoutCard\u003e\\n\u003c/Column\u003e;\\n\",\"sizes-dont\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton\u003eWeiter\u003c/Button\u003e\\n \u003cButton size=\\\"s\\\"\u003eWeiter\u003c/Button\u003e\\n \u003cButton size=\\\"s\\\"\u003eWeiter\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"sizes\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton size=\\\"s\\\"\u003eSmall\u003c/Button\u003e\\n \u003cButton\u003eMedium\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"text-clarity-do\":\"import {\\n ActionGroup,\\n Button,\\n Heading,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cheader className=\\\"flow--modal--header\\\"\u003e\\n \u003cHeading\u003e\\n Möchtest du die Bestellung wirklich verlassen?\\n \u003c/Heading\u003e\\n \u003c/header\u003e\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cText\u003e\\n Bist du sicher, dass du die Bestellung wirklich\\n verlassen möchtest? Deine eingegebenen Daten werden\\n nicht gespeichert.\\n \u003c/Text\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n Bestellung fortsetzen\\n \u003c/Button\u003e\\n \u003cButton color=\\\"danger\\\"\u003eBestellung verlassen\u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\",\"text-clarity-dont\":\"import {\\n ActionGroup,\\n Button,\\n Heading,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cheader className=\\\"flow--modal--header\\\"\u003e\\n \u003cHeading\u003e\\n Möchtest du die Bestellung wirklich verlassen?\\n \u003c/Heading\u003e\\n \u003c/header\u003e\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cText\u003e\\n Bist du sicher, dass du die Bestellung wirklich\\n verlassen möchtest? Deine eingegebenen Daten werden\\n nicht gespeichert.\\n \u003c/Text\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n \u003cButton color=\\\"danger\\\"\u003eVerlassen\u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\",\"text-length-do\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cButton color=\\\"accent\\\"\u003eProjekt anpassen\u003c/Button\u003e;\\n\",\"text-length-dont\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cButton color=\\\"accent\\\"\u003e\\n Projekt und\\n \u003cbr /\u003e\\n Tarif anpassen\\n\u003c/Button\u003e;\\n\",\"variants\":\"import { Button } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cButton\u003eSolid\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\"\u003eSoft\u003c/Button\u003e\\n \u003cButton variant=\\\"plain\\\"\u003ePlain\u003c/Button\u003e\\n \u003cButton variant=\\\"outline\\\"\u003eOutline\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\":{\"avatar\":\"import {\\n Avatar,\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n Heading,\\n IconCamera,\\n Initials,\\n MenuItem,\\n Section,\\n Separator,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu selectionMode=\\\"navigation\\\"\u003e\\n \u003cSection\u003e\\n \u003cMenuItem\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cIconCamera /\u003e\\n \u003c/MenuItem\u003e\\n \u003cHeading\u003eMax Mustermann\u003c/Heading\u003e\\n \u003c/Section\u003e\\n \u003cSeparator /\u003e\\n \u003cSection\u003e\\n \u003cMenuItem\u003e\\n \u003cText\u003eSettings\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003cMenuItem\u003e\\n \u003cText\u003eLogout\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003c/Section\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"default\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\\n onAction={(id) =\u003e {\\n alert(id);\\n }}\\n \u003e\\n \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n IconInfo,\\n MenuItem,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\\n onAction={(id) =\u003e {\\n alert(id);\\n }}\\n \u003e\\n \u003cMenuItem id=\\\"1\\\"\u003e\\n \u003cIconInfo /\u003e\\n \u003cText\u003eItem 1\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003e\\n \u003cIconInfo /\u003e\\n \u003cText\u003eItem 2\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"3\\\"\u003e\\n \u003cIconInfo /\u003e\\n \u003cText\u003eItem 3\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\\n selectionMode=\\\"multiple\\\"\\n defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n \u003e\\n \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"section\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuSection,\\n ContextMenuTrigger,\\n Heading,\\n MenuItem,\\n Separator,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\u003e\\n \u003cContextMenuSection\u003e\\n \u003cHeading\u003eSection 1\u003c/Heading\u003e\\n \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenuSection\u003e\\n \u003cSeparator /\u003e\\n \u003cContextMenuSection\u003e\\n \u003cHeading\u003eSection 2\u003c/Heading\u003e\\n \u003cMenuItem id=\\\"4\\\"\u003eItem 4\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"5\\\"\u003eItem 5\u003c/MenuItem\u003e\\n \u003c/ContextMenuSection\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"sectionSelectionMode\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuSection,\\n ContextMenuTrigger,\\n MenuItem,\\n Separator,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\u003e\\n \u003cContextMenuSection selectionMode=\\\"multiple\\\"\u003e\\n \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenuSection\u003e\\n \u003cSeparator /\u003e\\n \u003cContextMenuSection selectionMode=\\\"single\\\"\u003e\\n \u003cMenuItem id=\\\"item1\\\"\u003eItem 4\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item2\\\"\u003eItem 5\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item3\\\"\u003eItem 6\u003c/MenuItem\u003e\\n \u003c/ContextMenuSection\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"separator\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n Separator,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\u003e\\n \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cSeparator /\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\\n selectionMode=\\\"single\\\"\\n defaultSelectedKeys={[\\\"item2\\\"]}\\n \u003e\\n \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"switch\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu selectionMode=\\\"switch\\\"\u003e\\n \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"width\":\"import {\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n MenuItem,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n \u003cButton\u003eTrigger\u003c/Button\u003e\\n \u003cContextMenu\\n width={300}\\n onAction={(id) =\u003e {\\n alert(id);\\n }}\\n \u003e\\n \u003cMenuItem id=\\\"1\\\"\u003eMein Projekt\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"2\\\"\u003eMein zweites Projekt\u003c/MenuItem\u003e\\n \u003cMenuItem id=\\\"3\\\"\u003e\\n Mein drittes Projekt mit einem sehr langen Namen\\n \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\":{\"align\":\"import {\\n Align,\\n CopyButton,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n \u003cCopyButton text=\\\"mail.agenturserver.de\\\" /\u003e\\n\u003c/Align\u003e;\\n\",\"default\":\"import { CopyButton } from \\\"@mittwald/flow-react-components\\\";\\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 example: \\\"intro\\\",\\n zoom: 0.8\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Chat\",\"description\":\"Der Chat dient dazu einen MessageThread und die dazugehörigen Eingabe-Elemente anzuordnen\"},\"scope\":{}},\"examples\":{\"default\":\"$20\",\"form\":\"$21\",\"intro\":\"import {\\n Align,\\n Avatar,\\n Button,\\n Chat,\\n Content,\\n Header,\\n Initials,\\n Message,\\n MessageThread,\\n Text,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cChat\u003e\\n \u003cMessageThread\u003e\\n \u003cMessage\u003e\\n \u003cHeader\u003e\\n \u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eMax Mustermann\u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Align\u003e\\n \u003c/Header\u003e\\n \u003cContent\u003e\\n \u003cText\u003e\\n Labore, similique. Earum, quas in. At dolorem\\n corrupti blanditiis nulla deserunt laborum!\\n Corrupti delectus aspernatur nihil nulla obcaecati\\n ipsam porro sequi rem? Quam.\\n \u003c/Text\u003e\\n \u003c/Content\u003e\\n \u003c/Message\u003e\\n \u003c/MessageThread\u003e\\n \u003cTextArea\\n aria-label=\\\"Nachricht\\\"\\n rows={1}\\n autoResizeMaxRows={4}\\n /\u003e\\n \u003cButton color=\\\"accent\\\"\u003eSenden\u003c/Button\u003e\\n\u003c/Chat\u003e;\\n\",\"upload\":\"$22\"},\"slugs\":[\"03-components\",\"chat\",\"chat\"],\"filename\":\"03-components/chat/chat/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"MessageSeparator\",\"description\":\"Verwende den MessageSeparator in einem MessageThread um beispielsweise Statusinformationen zu platzieren\"},\"scope\":{}},\"examples\":{\"default\":\"import { MessageSeparator } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMessageSeparator\u003eTicket erstellt\u003c/MessageSeparator\u003e;\\n\"},\"slugs\":[\"03-components\",\"chat\",\"message-separator\"],\"filename\":\"03-components/chat/message-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 zoom: 0.7,\\n example: \\\"intro\\\",\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"MessageThread\",\"description\":\"Der MessageThread dient zur Gruppierung von Messages und kann beispielsweise für einen Chat genutzt werden\"},\"scope\":{}},\"examples\":{\"default\":\"$23\",\"intro\":\"import {\\n Align,\\n Avatar,\\n Content,\\n Header,\\n Initials,\\n Message,\\n MessageThread,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMessageThread\u003e\\n \u003cMessage type=\\\"sender\\\"\u003e\\n \u003cHeader\u003e\\n \u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eMax Mustermann\u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Align\u003e\\n \u003c/Header\u003e\\n \u003cContent\u003e\\n \u003cText\u003e\\n Lorem ipsum dolor sit amet consectetur adipisicing.\\n \u003c/Text\u003e\\n \u003c/Content\u003e\\n \u003c/Message\u003e\\n\\n \u003cMessage type=\\\"responder\\\"\u003e\\n \u003cHeader\u003e\\n \u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eJohn Doe\u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Align\u003e\\n \u003c/Header\u003e\\n \u003cContent\u003e\\n \u003cText\u003e\\n Lorem ipsum dolor sit amet consectetur adipisicing\\n elit. Cumque eius quam.\\n \u003c/Text\u003e\\n \u003c/Content\u003e\\n \u003c/Message\u003e\\n\u003c/MessageThread\u003e;\\n\"},\"slugs\":[\"03-components\",\"chat\",\"message-thread\"],\"filename\":\"03-components/chat/message-thread/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Message\",\"description\":\"Verwende die Message Komponente um Nachrichten, beispielsweise in einem Chat, darzustellen\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Align,\\n Avatar,\\n Button,\\n Content,\\n ContextMenu,\\n ContextMenuTrigger,\\n Header,\\n Initials,\\n MenuItem,\\n Message,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMessage\u003e\\n \u003cHeader\u003e\\n \u003cContextMenuTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextMenu\u003e\\n \u003cMenuItem\u003eBearbeiten\u003c/MenuItem\u003e\\n \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\\n \u003c/ContextMenu\u003e\\n \u003c/ContextMenuTrigger\u003e\\n \u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eMax Mustermann\u003c/b\u003e\\n Organisationsinhaber\\n \u003c/Text\u003e\\n \u003c/Align\u003e\\n \u003cText\u003e01.09.2024, 12:45\u003c/Text\u003e\\n \u003c/Header\u003e\\n\\n \u003cContent\u003e\\n \u003cText\u003e\\n Lorem ipsum dolor sit amet, consetetur sadipscing\\n elitr, sed diam nonumy eirmod tempor invidunt ut\\n labore et dolore magna aliquyam erat, sed diam\\n voluptua. At vero eos et accusam et justo duo dolores\\n et ea rebum. Stet clita kasd gubergren, no sea\\n takimata sanctus est Lorem ipsum dolor sit amet.\\n \u003c/Text\u003e\\n \u003c/Content\u003e\\n\u003c/Message\u003e;\\n\",\"sender\":\"$24\"},\"slugs\":[\"03-components\",\"chat\",\"message\"],\"filename\":\"03-components/chat/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\":\"AvatarStack\",\"description\":\"Der AvatarStack dient dazu eine Gruppe von Avataren anzuzeigen\"},\"scope\":{}},\"examples\":{\"clickable\":\"import {\\n Avatar,\\n AvatarStack,\\n Button,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatarStack\\n onCountPress={() =\u003e console.log(\\\"count clicked\\\")}\\n\u003e\\n \u003cButton onPress={() =\u003e console.log(\\\"avatar clicked\\\")}\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/Button\u003e\\n \u003cButton onPress={() =\u003e console.log(\\\"avatar clicked\\\")}\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/Button\u003e\\n \u003cButton onPress={() =\u003e console.log(\\\"avatar clicked\\\")}\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/Button\u003e\\n\u003c/AvatarStack\u003e;\\n\",\"default\":\"import {\\n Avatar,\\n AvatarStack,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatarStack\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n\u003c/AvatarStack\u003e;\\n\",\"sizes\":\"import {\\n Avatar,\\n AvatarStack,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cAvatarStack size=\\\"xs\\\"\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/AvatarStack\u003e\\n \u003cAvatarStack size=\\\"s\\\"\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/AvatarStack\u003e\\n \u003cAvatarStack size=\\\"m\\\"\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/AvatarStack\u003e\\n \u003cAvatarStack size=\\\"l\\\"\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003c/AvatarStack\u003e\\n\u003c/Row\u003e;\\n\",\"total-count\":\"import {\\n Avatar,\\n AvatarStack,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatarStack totalCount={20}\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eJohn Doe\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n\u003c/AvatarStack\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"avatar-stack\"],\"filename\":\"03-components/content/avatar-stack/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Avatar,\\n Initials,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eMax Mustermann\u003c/b\u003e\\n Organisationsinhaber\\n \u003c/Text\u003e\\n\u003c/Align\u003e;\\n\",\"colors\":\"import {\\n Avatar,\\n IconCustomer,\\n IconHome,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar color=\\\"lilac\\\"\u003e\\n \u003cInitials\u003eGilian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cIconHome /\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar\u003e\\n \u003cIconCustomer /\u003e\\n \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import {\\n Avatar,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatar\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import {\\n Avatar,\\n IconHome,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatar color=\\\"blue\\\"\u003e\\n \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import {\\n Avatar,\\n Image,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAvatar\u003e\\n \u003cImage\\n alt=\\\"Gopher\\\"\\n src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import {\\n Avatar,\\n Initials,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cAvatar size=\\\"xs\\\"\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar size=\\\"s\\\"\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cAvatar size=\\\"m\\\"\u003e\\n \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n \u003c/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\":\"CodeBlock\",\"description\":\"Der CodeBlock wird verwendet, um Code als Block mit Syntax-Highlighting darzustellen.\"},\"scope\":{}},\"examples\":{\"copyable\":\"import { CodeBlock } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCodeBlock\\n copyable\\n language=\\\"json\\\"\\n code={`{\\n \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\n \\\"name\\\": \\\"My Project\\\"\\n}`}\\n/\u003e;\\n\",\"dark\":\"import { CodeBlock } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCodeBlock\\n color=\\\"dark\\\"\\n language=\\\"json\\\"\\n code={`{\\n \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\n \\\"name\\\": \\\"My Project\\\"\\n}`}\\n/\u003e;\\n\",\"default\":\"import { CodeBlock } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCodeBlock\\n language=\\\"json\\\"\\n code={`{\\n \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\n \\\"name\\\": \\\"My Project\\\"\\n}`}\\n/\u003e;\\n\",\"light\":\"import { CodeBlock } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCodeBlock\\n color=\\\"light\\\"\\n language=\\\"json\\\"\\n code={`{\\n \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\n \\\"name\\\": \\\"My Project\\\"\\n}`}\\n/\u003e;\\n\",\"lineNumbers\":\"import { CodeBlock } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCodeBlock\\n showLineNumbers\\n language=\\\"json\\\"\\n code={`{\\n \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\n \\\"name\\\": \\\"My Project\\\"\\n}`}\\n/\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"code-block\"],\"filename\":\"03-components/content/code-block/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Color\",\"description\":\"Verwende die Color Komponente um Teile eines Textes hervorzuheben.\"},\"scope\":{}},\"examples\":{\"accent-box\":\"import {\\n AccentBox,\\n Color,\\n Flex,\\n Heading,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccentBox color=\\\"gradient\\\"\u003e\\n \u003cFlex align=\\\"center\\\" wrap=\\\"wrap\\\" gap=\\\"m\\\"\u003e\\n \u003cFlex direction=\\\"column\\\" grow\u003e\\n \u003cHeading size=\\\"l\\\"\u003e\\n \u003cColor color=\\\"violet\\\"\u003emStudio Extension\u003c/Color\u003e{\\\" \\\"}\\n selber entwickeln\\n \u003c/Heading\u003e\\n \u003cText\u003e\\n \u003cb\u003e\\n \u003cColor\u003e\\n Veröffentliche{\\\" \\\"}\\n \u003cColor color=\\\"violet\\\"\u003eeigene Features\u003c/Color\u003e im\\n mStudio\\n \u003c/Color\u003e\\n \u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Flex\u003e\\n \u003cLink target=\\\"_blank\\\" href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n Contributor Landingpage\\n \u003c/Link\u003e\\n \u003c/Flex\u003e\\n\u003c/AccentBox\u003e;\\n\",\"color\":\"import { Color } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cColor color=\\\"blue\\\"\u003eblue\u003c/Color\u003e\\n \u003cColor color=\\\"violet\\\"\u003eviolet\u003c/Color\u003e\\n \u003cColor color=\\\"lilac\\\"\u003elilac\u003c/Color\u003e\\n \u003cColor color=\\\"teal\\\"\u003eteal\u003c/Color\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import {\\n Color,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n \u003cb\u003e\\n Veröffentliche{\\\" \\\"}\\n \u003cColor color=\\\"violet\\\"\u003eeigene Features\u003c/Color\u003e im mStudio\\n \u003c/b\u003e\\n\u003c/Text\u003e;\\n\",\"heading\":\"import {\\n Color,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading\u003e\\n \u003cColor color=\\\"violet\\\"\u003emStudio Extension\u003c/Color\u003e selber\\n entwickeln\\n\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"color\"],\"filename\":\"03-components/content/color/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"contextualHelp\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components\\\";\\nimport {\\n ContextualHelp,\\n ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading\u003e\\n Rechte \u0026 Rollen\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cText\u003e\\n Weitere Informationen zum Thema Rechte \u0026 Rollen\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n\u003c/Heading\u003e;\\n\",\"dark\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"default\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading\u003e\\n \u003cIconMember /\u003e\\n Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003c\u003e\\n \u003cHeading level={1}\u003e\\n Das ist eine Level 1 Überschrift\\n \u003c/Heading\u003e\\n \u003cHeading level={2}\u003e\\n Das ist eine Level 2 Überschrift\\n \u003c/Heading\u003e\\n \u003cHeading level={3}\u003e\\n Das ist eine Level 3 Überschrift\\n \u003c/Heading\u003e\\n \u003cHeading level={4}\u003e\\n Das ist eine Level 4 Überschrift\\n \u003c/Heading\u003e\\n \u003cHeading level={5}\u003e\\n Das ist eine Level 5 Überschrift\\n \u003c/Heading\u003e\\n\u003c/\u003e;\\n\",\"light\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"size\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeading level={2} size=\\\"xs\\\"\u003e\\n Das ist eine Überschrift für die eine benutzerdefinierte\\n Größe gesetzt wurde\\n\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\":{\"align\":\"import {\\n Align,\\n IconDomain,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cIconDomain /\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n\u003c/Align\u003e;\\n\",\"decorative\":\"$25\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"functional\":\"$26\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cIconHome size=\\\"s\\\" /\u003e\\n \u003cIconHome size=\\\"m\\\" /\u003e\\n \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import {\\n ColumnLayout,\\n IconDanger,\\n IconFailed,\\n IconInfo,\\n IconPending,\\n IconSucceeded,\\n IconSuccess,\\n IconWarning,\\n Label,\\n LabeledValue,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eDanger\u003c/Label\u003e\\n \u003cIconDanger /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eWarning\u003c/Label\u003e\\n \u003cIconWarning /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eSuccess\u003c/Label\u003e\\n \u003cIconSuccess /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eInfo\u003c/Label\u003e\\n \u003cIconInfo /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003ePending\u003c/Label\u003e\\n \u003cIconPending /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eFailed\u003c/Label\u003e\\n \u003cIconFailed /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n \u003cIconSucceeded /\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg\":\"import { Icon } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIcon\u003e\\n \u003csvg\\n viewBox=\\\"0 0 100 100\\\"\\n xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n \u003e\\n \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import { Icon } from \\\"@mittwald/flow-react-components\\\";\\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\":{\"actionGroup\":\"import {\\n ActionGroup,\\n Button,\\n Heading,\\n IconApp,\\n IllustratedMessage,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIllustratedMessage\u003e\\n \u003cIconApp /\u003e\\n \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n \u003cText\u003e\\n Lege deine erste App an, um mit der Arbeit an deiner\\n Webseite loszulegen.\\n \u003c/Text\u003e\\n \u003cActionGroup\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Zurück\\n \u003c/Button\u003e\\n \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"dark\":\"import {\\n Button,\\n Heading,\\n IconApp,\\n IllustratedMessage,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIllustratedMessage color=\\\"dark\\\"\u003e\\n \u003cIconApp /\u003e\\n \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n \u003cText\u003e\\n Lege deine erste App an, um mit der Arbeit an deiner\\n Webseite loszulegen.\\n \u003c/Text\u003e\\n \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"default\":\"import {\\n Button,\\n Heading,\\n IconApp,\\n IllustratedMessage,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIllustratedMessage\u003e\\n \u003cIconApp /\u003e\\n \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n \u003cText\u003e\\n Lege deine erste App an, um mit der Arbeit an deiner\\n Webseite loszulegen.\\n \u003c/Text\u003e\\n \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"light\":\"import {\\n Button,\\n Heading,\\n IconApp,\\n IllustratedMessage,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIllustratedMessage color=\\\"light\\\"\u003e\\n \u003cIconApp /\u003e\\n \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n \u003cText\u003e\\n Lege deine erste App an, um mit der Arbeit an deiner\\n Webseite loszulegen.\\n \u003c/Text\u003e\\n \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import {\\n Button,\\n Heading,\\n IconDanger,\\n IllustratedMessage,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cIllustratedMessage color=\\\"danger\\\"\u003e\\n \u003cIconDanger /\u003e\\n \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n \u003cText\u003e\\n Du hast keine 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\":{\"aspectRatio\":\"import { Image } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cImage\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n alt=\\\"mittwald\\\"\\n width={200}\\n aspectRatio={16 / 9}\\n withBorder\\n/\u003e;\\n\",\"border\":\"import { Image } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cImage\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n alt=\\\"mittwald\\\"\\n width={200}\\n withBorder\\n/\u003e;\\n\",\"default\":\"import { Image } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cImage\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n alt=\\\"mittwald\\\"\\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\":{\"dark\":\"import {\\n InlineCode,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n Gib \u003cInlineCode color=\\\"dark\\\"\u003eyarn start\u003c/InlineCode\u003e ein\\n um deine App zu starten.\\n\u003c/Text\u003e;\\n\",\"default\":\"import {\\n InlineCode,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n zu starten.\\n\u003c/Text\u003e;\\n\",\"light\":\"import {\\n InlineCode,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText color=\\\"light\\\"\u003e\\n Gib \u003cInlineCode color=\\\"light\\\"\u003eyarn start\u003c/InlineCode\u003e ein\\n um deine App 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\":\"Labels werden in Formularen (z.B. TextField, NumberField) oder beim LabeledValue verwendet. Dort erläutern sie die Eingabeanforderungen oder setzen Informationen in einen Kontext.\"},\"scope\":{}},\"examples\":{\"default\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLabel\u003eLabel\u003c/Label\u003e;\\n\",\"do\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cLabel\u003eVorname\u003c/Label\u003e\\n \u003cLabel\u003eE-Mail\u003c/Label\u003e\\n \u003cLabel\u003eVerknüpfte App\u003c/Label\u003e\\n \u003cLabel\u003eDatenbankbenutzer\u003c/Label\u003e\\n\u003c/Column\u003e;\\n\",\"dont\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cLabel\u003eBitte gib deinen Vornamen ein\u003c/Label\u003e\\n \u003cLabel\u003eE-Mail (name@mail.de)\u003c/Label\u003e\\n \u003cLabel\u003e\\n Mit welcher App ist die Datenbank verknüpft?\\n \u003c/Label\u003e\\n \u003cLabel\u003eDatenbankbenutzer:\u003c/Label\u003e\\n\u003c/Column\u003e;\\n\",\"states\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cLabel\u003eDefault\u003c/Label\u003e\\n \u003cLabel isDisabled\u003eDisabled\u003c/Label\u003e\\n\u003c/Row\u003e;\\n\",\"usage\":\"import {\\n ColumnLayout,\\n Header,\\n Heading,\\n Label,\\n LabeledValue,\\n Section,\\n Switch,\\n Text,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eCronjob\u003c/Heading\u003e\\n \u003cSwitch\u003eAktiviert\u003c/Switch\u003e\\n \u003c/Header\u003e\\n \u003cColumnLayout l={[1, 1]}\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eBeschreibung\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eNächste Ausführung\u003c/Label\u003e\\n \u003cText\u003e10.06.2024 um 09:25 Uhr\u003c/Text\u003e\\n \u003c/LabeledValue\u003e\\n \u003c/ColumnLayout\u003e\\n\u003c/Section\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\":\"Das LabeledValue zeigt eine statische Information und setzt sie durch ein beschreibendes Label in den passenden Kontext.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import {\\n Content,\\n CopyButton,\\n IconExternalLink,\\n Label,\\n LabeledValue,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\\n \u003cContent\u003ep-wut3uw\u003c/Content\u003e\\n \u003cCopyButton text=\\\"p-wut3uw\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eDatenbankserver\u003c/Label\u003e\\n \u003cContent\u003e\\n mysql-kq3v4g.ge-s-hopovh.db.project.host\\n \u003c/Content\u003e\\n \u003cCopyButton text=\\\"mysql-kq3v4g.ge-s-hopovh.db.project.host\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003cCopyButton text=\\\"p-lol3qe.project.space\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import {\\n Content,\\n Label,\\n LabeledValue,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLabeledValue\u003e\\n \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"do\":\"import {\\n ColumnLayout,\\n Content,\\n CopyButton,\\n IconExternalLink,\\n InlineCode,\\n Label,\\n LabeledValue,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektname\u003c/Label\u003e\\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\\n \u003cContent\u003ep-wut3uw\u003c/Content\u003e\\n \u003cCopyButton text=\\\"p-wut3uw\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003cCopyButton text=\\\"p-lol3qe.project.space\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eServer\u003c/Label\u003e\\n \u003cLink\u003eDolce-Server-01\u003c/Link\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eA-Record\u003c/Label\u003e\\n \u003cInlineCode\u003e45.144.187.21\u003c/InlineCode\u003e\\n \u003cCopyButton text=\\\"45.144.187.21\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eErstellungsdatum\u003c/Label\u003e\\n \u003cContent\u003e06.12.2023 um 11:40 Uhr\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"dont\":\"import {\\n ColumnLayout,\\n Content,\\n CopyButton,\\n IconExternalLink,\\n InlineCode,\\n Label,\\n LabeledValue,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1]}\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eErstellungsdatum\u003c/Label\u003e\\n \u003cContent\u003e06.12.2023 um 11:40 Uhr\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\\n \u003cContent\u003ep-wut3uw\u003c/Content\u003e\\n \u003cCopyButton text=\\\"p-wut3uw\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eA-Record\u003c/Label\u003e\\n \u003cInlineCode\u003e45.144.187.21\u003c/InlineCode\u003e\\n \u003cCopyButton text=\\\"45.144.187.21\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eServer\u003c/Label\u003e\\n \u003cLink\u003eDolce-Server-01\u003c/Link\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektname\u003c/Label\u003e\\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003cCopyButton text=\\\"p-lol3qe.project.space\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"inline-code\":\"import {\\n InlineCode,\\n Label,\\n LabeledValue,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLabeledValue\u003e\\n \u003cLabel\u003eDatenbankserver\u003c/Label\u003e\\n \u003cInlineCode\u003e\\n mysql-kq3v4g.ge-s-hopovh.db.project.host\\n \u003c/InlineCode\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import {\\n IconExternalLink,\\n Label,\\n LabeledValue,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eServer\u003c/Label\u003e\\n \u003cLink\u003eMyServ-01\u003c/Link\u003e\\n \u003c/LabeledValue\u003e\\n\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/Row\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\":\"Markdown\",\"description\":\"Verwende die Markdown Komponente um Markdown zu rendern.\"},\"scope\":{}},\"examples\":{\"codeBlock\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e\\n {\\\"```json\\\\n\\\" +\\n \\\"{\\\\n\\\" +\\n ' \\\"projectId\\\": \\\"b3a96db5-ba8f-40dd-9100-bab43ac1f698\\\",\\\\n' +\\n ' \\\"name\\\": \\\"My Project\\\"\\\\n' +\\n \\\"}\\\\n\\\" +\\n \\\"```\\\\n\\\"}\\n\u003c/Markdown\u003e;\\n\",\"dark\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown color=\\\"dark\\\"\u003e\\n Lorem ipsum dolor sit amet **consectetur adipisicing**\\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\\n ***fugit***.\\n\u003c/Markdown\u003e;\\n\",\"default\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e\\n Lorem ipsum dolor sit amet **consectetur adipisicing**\\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\\n ***fugit***.\\n\u003c/Markdown\u003e;\\n\",\"heading\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e\\n {\\n \\\"# Heading Level 1 \\\\n## Heading Level 2 \\\\n### Heading Level 3 \\\\n#### Heading Level 4 \\\\n##### Heading Level 5 \\\\n###### Heading Level 6\\\"\\n }\\n\u003c/Markdown\u003e;\\n\",\"inlineCode\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e{\\\"`127.0.0.1`\\\"}\u003c/Markdown\u003e;\\n\",\"light\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown color=\\\"light\\\"\u003e\\n Lorem ipsum dolor sit amet **consectetur adipisicing**\\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\\n ***fugit***.\\n\u003c/Markdown\u003e;\\n\",\"link\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e[mittwald.de](https://mittwald.de).\u003c/Markdown\u003e;\\n\",\"orderedList\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e\\n {\\n \\\"1. Ordered list item 1 \\\\n 2. Ordered list item 2 \\\\n 3. Ordered list item 3\\\"\\n }\\n\u003c/Markdown\u003e;\\n\",\"quote\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e{\\\"\u003e This is a quote\\\"}\u003c/Markdown\u003e;\\n\",\"unorderedList\":\"import { Markdown } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cMarkdown\u003e\\n {\\n \\\"- Unordered list item 1 \\\\n - Unordered list item 2 \\\\n - Unordered list item 3\\\"\\n }\\n\u003c/Markdown\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"markdown\"],\"filename\":\"03-components/content/markdown/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import { Skeleton } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n \u003cSkeleton\\n style={{\\n height: \\\"100px\\\",\\n width: \\\"100px\\\",\\n borderRadius: \\\"50%\\\",\\n }}\\n /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import { Skeleton } from \\\"@mittwald/flow-react-components\\\";\\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\":{\"align\":\"import {\\n Align,\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n CopyButton,\\n IconDomain,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cAlign\u003e\\n \u003cIconDomain /\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n \u003c/Align\u003e\\n\\n \u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n \u003cCopyButton text=\\\"mail.agenturserver.de\\\" /\u003e\\n \u003c/Align\u003e\\n\\n \u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cText\u003e\\n Hier wird die URL des Servers angezeigt, der für\\n den E-Mail-Versand genutzt wird.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Align\u003e\\n\u003c/Column\u003e;\\n\",\"dark\":\"import { Text } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText color=\\\"dark\\\"\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"default\":\"import { Text } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import { Text } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cText\\n style={{ borderInline: \\\"2px solid red\\\" }}\\n emulateBoldWidth\\n \u003e\\n Das ist ein Text\\n \u003c/Text\u003e\\n \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\",\"light\":\"import { Text } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText color=\\\"light\\\"\u003eDas ist ein Text\u003c/Text\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\\\";\\n\\n\u003cCheckboxButton\u003e\\n Ich stimme den AGBs zu und bestätige, dass ich die\\n Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\",\"form\":\"import {\\n Button,\\n CheckboxButton,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ acceptTerms: boolean }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"acceptTerms\\\"\\n rules={{ required: true }}\\n \u003e\\n \u003cCheckboxButton\u003e\\n Ich stimme den AGBs zu und bestätige, dass ich\\n die Datenschutzhinweise zur Kenntnis genommen\\n habe.\\n \u003c/CheckboxButton\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\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 {\\n CheckboxButton,\\n CheckboxGroup,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckboxGroup\u003e\\n \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n Checkbox,\\n CheckboxGroup,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckboxGroup\u003e\\n \u003cLabel\u003e\\n Berechtigungen\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import {\\n CheckboxButton,\\n CheckboxGroup,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import {\\n Checkbox,\\n CheckboxGroup,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckboxGroup\u003e\\n \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"fieldDescription\":\"import {\\n Checkbox,\\n CheckboxGroup,\\n FieldDescription,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckboxGroup\u003e\\n \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n \u003cFieldDescription\u003eWeitere Informationen\u003c/FieldDescription\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"form\":\"import {\\n Button,\\n Checkbox,\\n CheckboxGroup,\\n Label,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ permissions: string[] }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"permissions\\\"\\n rules={{\\n required:\\n \\\"Bitte wähle mindestens eine Berechtigung aus\\\",\\n }}\\n \u003e\\n \u003cCheckboxGroup\u003e\\n \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n \u003c/CheckboxGroup\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\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\\\";\\n\\n\u003cCheckbox\u003e\\n Ich stimme den AGBs zu und bestätige, dass ich die\\n Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import { Checkbox } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n Ich stimme den AGBs zu und bestätige, dass ich die\\n Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"form\":\"import {\\n Button,\\n Checkbox,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ acceptTerms: boolean }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"acceptTerms\\\"\\n rules={{ required: true }}\\n \u003e\\n \u003cCheckbox\u003e\\n Ich stimme den AGBs zu und bestätige, dass ich\\n die Datenschutzhinweise zur Kenntnis genommen\\n habe.\\n \u003c/Checkbox\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"indeterminated\":\"import { Checkbox } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\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\":\"ComboBox\",\"description\":\"Die ComboBox Komponente verbindet ein Textfield mit einer Auswahl an Optionen, die durch Eingabe in das Textfield gefiltert wird.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n ComboBox,\\n Label,\\n Option,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cComboBox\u003e\\n \u003cLabel\u003eDomain\u003c/Label\u003e\\n \u003cOption\u003emydomain.de\u003c/Option\u003e\\n \u003cOption\u003eshop.mydomain.de\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003ewww.anotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/shop\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/blog\u003c/Option\u003e\\n \u003cOption\u003eonemoredomain.de\u003c/Option\u003e\\n \u003cOption\u003ewww.onemoredomain.de\u003c/Option\u003e\\n \u003c/ComboBox\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ComboBox,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Option,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cComboBox\u003e\\n \u003cLabel\u003e\\n Domain\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cOption\u003emydomain.de\u003c/Option\u003e\\n \u003cOption\u003eshop.mydomain.de\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003ewww.anotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/shop\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/blog\u003c/Option\u003e\\n \u003cOption\u003eonemoredomain.de\u003c/Option\u003e\\n \u003cOption\u003ewww.onemoredomain.de\u003c/Option\u003e\\n\u003c/ComboBox\u003e;\\n\",\"default\":\"import {\\n ComboBox,\\n Label,\\n Option,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cComboBox\u003e\\n \u003cLabel\u003eDomain\u003c/Label\u003e\\n \u003cOption\u003emydomain.de\u003c/Option\u003e\\n \u003cOption\u003eshop.mydomain.de\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003ewww.anotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/shop\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/blog\u003c/Option\u003e\\n \u003cOption\u003eonemoredomain.de\u003c/Option\u003e\\n \u003cOption\u003ewww.onemoredomain.de\u003c/Option\u003e\\n\u003c/ComboBox\u003e;\\n\",\"fieldDescription\":\"import {\\n ComboBox,\\n FieldDescription,\\n Label,\\n Option,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cComboBox\u003e\\n \u003cLabel\u003eDomain\u003c/Label\u003e\\n \u003cOption\u003emydomain.de\u003c/Option\u003e\\n \u003cOption\u003eshop.mydomain.de\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003ewww.anotherdomain.com\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/shop\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com/blog\u003c/Option\u003e\\n \u003cOption\u003eonemoredomain.de\u003c/Option\u003e\\n \u003cOption\u003ewww.onemoredomain.de\u003c/Option\u003e\\n \u003cFieldDescription\u003eWeitere Informationen\u003c/FieldDescription\u003e\\n\u003c/ComboBox\u003e;\\n\",\"form\":\"import {\\n Button,\\n ComboBox,\\n Label,\\n Option,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ domain: string }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"domain\\\"\\n rules={{\\n required: \\\"Bitte wähle eine Domain aus\\\",\\n }}\\n \u003e\\n \u003cComboBox\u003e\\n \u003cLabel\u003eDomain\u003c/Label\u003e\\n \u003cOption\u003emydomain.de\u003c/Option\u003e\\n \u003cOption\u003eanotherdomain.com\u003c/Option\u003e\\n \u003c/ComboBox\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"combo-box\"],\"filename\":\"03-components/form-controls/combo-box/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"DatePicker\",\"description\":\"Der DatePicker wird dafür verwendet ein einzelnes Datum auszuwählen.\"},\"scope\":{}},\"examples\":{\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n DatePicker,\\n Heading,\\n Text,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDatePicker\u003e\\n \u003cLabel\u003e\\n Datum\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/DatePicker\u003e;\\n\",\"default\":\"import {\\n DatePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDatePicker\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n\u003c/DatePicker\u003e;\\n\",\"disabled\":\"import {\\n DatePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDatePicker isDisabled\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n\u003c/DatePicker\u003e;\\n\",\"fieldDescription\":\"import {\\n DatePicker,\\n FieldDescription,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDatePicker\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n \u003cFieldDescription\u003eWeitere Informationen\u003c/FieldDescription\u003e\\n\u003c/DatePicker\u003e;\\n\",\"form\":\"import {\\n Button,\\n DatePicker,\\n Label,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\nimport type { CalendarDate } from \\\"@internationalized/date\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ date: CalendarDate }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"date\\\"\\n rules={{\\n required: \\\"Bitte wähle ein Datum aus\\\",\\n }}\\n \u003e\\n \u003cDatePicker\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n \u003c/DatePicker\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"future\":\"import {\\n DatePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport {\\n getLocalTimeZone,\\n today,\\n} from \\\"@internationalized/date\\\";\\n\\n\u003cDatePicker minValue={today(getLocalTimeZone())}\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n\u003c/DatePicker\u003e;\\n\",\"unavailable\":\"import {\\n DatePicker,\\n FieldDescription,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { type DateValue } from \\\"@internationalized/date\\\";\\n\\n\u003cDatePicker\\n isRequired\\n isDateUnavailable={(date: DateValue) =\u003e date.day !== 1}\\n\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n \u003cFieldDescription\u003e\\n Es kann nur der 1. jeden Monats ausgewählt werden\\n \u003c/FieldDescription\u003e\\n\u003c/DatePicker\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"date-picker\"],\"filename\":\"03-components/form-controls/date-picker/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"DateRangePicker\",\"description\":\"Der DateRangePicker wird dafür verwendet eine Zeitspanne zwischen zwei Daten auszuwählen.\"},\"scope\":{}},\"examples\":{\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n DateRangePicker,\\n Heading,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDateRangePicker\u003e\\n \u003cLabel\u003e\\n Zeitraum\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/DateRangePicker\u003e;\\n\",\"default\":\"import {\\n DateRangePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDateRangePicker\u003e\\n \u003cLabel\u003eZeitraum\u003c/Label\u003e\\n\u003c/DateRangePicker\u003e;\\n\",\"disabled\":\"import {\\n DateRangePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDateRangePicker isDisabled\u003e\\n \u003cLabel\u003eZeitraum\u003c/Label\u003e\\n\u003c/DateRangePicker\u003e;\\n\",\"fieldDescription\":\"import {\\n DateRangePicker,\\n FieldDescription,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cDateRangePicker\u003e\\n \u003cLabel\u003eZeitraum\u003c/Label\u003e\\n \u003cFieldDescription\u003eWeitere Informationen\u003c/FieldDescription\u003e\\n\u003c/DateRangePicker\u003e;\\n\",\"form\":\"import {\\n Button,\\n DateRangePicker,\\n Label,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport type { CalendarDate } from \\\"@internationalized/date\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{\\n range: { start: CalendarDate; end: CalendarDate };\\n }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"range\\\"\\n rules={{\\n required: \\\"Bitte wähle einen Zeitraum aus\\\",\\n }}\\n \u003e\\n \u003cDateRangePicker\u003e\\n \u003cLabel\u003eZeitraum\u003c/Label\u003e\\n \u003c/DateRangePicker\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"future\":\"import {\\n DateRangePicker,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport {\\n getLocalTimeZone,\\n today,\\n} from \\\"@internationalized/date\\\";\\n\\n\u003cDateRangePicker minValue={today(getLocalTimeZone())}\u003e\\n \u003cLabel\u003eZeitraum\u003c/Label\u003e\\n\u003c/DateRangePicker\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"date-range-picker\"],\"filename\":\"03-components/form-controls/date-range-picker/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Field,\\n Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport {\\n FieldDescription,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n interface Values {\\n name: string;\\n }\\n const form = useForm\u003cValues\u003e();\\n\\n return (\\n \u003cForm form={form} onSubmit={console.log}\u003e\\n \u003cField\\n name=\\\"name\\\"\\n rules={{\\n required: \\\"The project name is required\\\",\\n }}\\n \u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eName\u003c/Label\u003e\\n \u003cFieldDescription\u003e\\n The name of the project\\n \u003c/FieldDescription\u003e\\n \u003c/TextField\u003e\\n \u003c/Field\u003e\\n \u003c/Form\u003e\\n );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n interface Values {\\n myField: string;\\n }\\n const form = useForm\u003cValues\u003e();\\n\\n // Only `myField` is allowed for name prop\\n const Field = typedField(form);\\n\\n return (\\n \u003cForm form={form} onSubmit={console.log}\u003e\\n \u003cField name=\\\"myField\\\"\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eName\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/Field\u003e\\n \u003c/Form\u003e\\n );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"FileField\",\"description\":\"Das FileField dient zur Auswahl von Dateien für den Upload.\"},\"scope\":{}},\"examples\":{\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n FileField,\\n Heading,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileField\u003e\\n \u003cLabel\u003e\\n Zertifikat\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"secondary\\\"\u003e\\n Auswählen\\n \u003c/Button\u003e\\n\u003c/FileField\u003e;\\n\",\"default\":\"import {\\n Button,\\n FileField,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileField\u003e\\n \u003cLabel\u003eZertifikat\u003c/Label\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"secondary\\\"\u003e\\n Auswählen\\n \u003c/Button\u003e\\n\u003c/FileField\u003e;\\n\",\"disabled\":\"import {\\n Button,\\n FileField,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileField isDisabled\u003e\\n \u003cLabel\u003eZertifikat\u003c/Label\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"secondary\\\"\u003e\\n Auswählen\\n \u003c/Button\u003e\\n\u003c/FileField\u003e;\\n\",\"fieldDescription\":\"import {\\n Button,\\n FieldDescription,\\n FileField,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileField accept={\\\"image/png, image/jpeg\\\"}\u003e\\n \u003cLabel\u003eZertifikat\u003c/Label\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"secondary\\\"\u003e\\n Auswählen\\n \u003c/Button\u003e\\n \u003cFieldDescription\u003e\\n Erlaubte sind .jpeg und .png\\n \u003c/FieldDescription\u003e\\n\u003c/FileField\u003e;\\n\",\"form\":\"$27\",\"invalid\":\"import {\\n Button,\\n FieldError,\\n FileField,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileField isInvalid\u003e\\n \u003cLabel\u003eZertifikat\u003c/Label\u003e\\n \u003cButton variant=\\\"outline\\\" color=\\\"secondary\\\"\u003e\\n Auswählen\\n \u003c/Button\u003e\\n \u003cFieldError\u003eDie Datei ist zu groß\u003c/FieldError\u003e\\n\u003c/FileField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"file-field\"],\"filename\":\"03-components/form-controls/file-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Field,\\n Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport {\\n ActionGroup,\\n Button,\\n FieldDescription,\\n Label,\\n Section,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n interface Values {\\n name: string;\\n }\\n const form = useForm\u003cValues\u003e();\\n\\n const handleOnSubmit = (values: Values) =\u003e\\n alert(JSON.stringify(values));\\n\\n return (\\n \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\\n \u003cSection\u003e\\n \u003cField\\n name=\\\"name\\\"\\n rules={{\\n required: \\\"The project name is required\\\",\\n }}\\n \u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eName\u003c/Label\u003e\\n \u003cFieldDescription\u003e\\n The name of the project\\n \u003c/FieldDescription\u003e\\n \u003c/TextField\u003e\\n \u003c/Field\u003e\\n \u003cActionGroup\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSave\u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n \u003c/Section\u003e\\n \u003c/Form\u003e\\n );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cNumberField\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003c/NumberField\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n NumberField,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n \u003cLabel\u003e\\n Alter\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"default\":\"import {\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import {\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"fieldDescription\":\"import {\\n FieldDescription,\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField minValue={18} maxValue={100}\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003cFieldDescription\u003e\\n Du musst mindestens 18 Jahre alt sein\\n \u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n NumberField,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ age: number }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"age\\\"\\n rules={{\\n required: \\\"Bitte gib dein Alter an\\\",\\n }}\\n \u003e\\n \u003cNumberField minValue={0}\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003c/NumberField\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"invalid\":\"import {\\n FieldError,\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import {\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField isRequired\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import {\\n Label,\\n NumberField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNumberField\\n formatOptions={{\\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 ein Auswahlelement, das es dem User ermöglicht, genau eine Option aus einer vordefinierten Gruppe auszuwählen.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import {\\n Label,\\n RadioButton,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"mysql\\\"\u003e\\n \u003cLabel\u003eDatenbank-Typ\u003c/Label\u003e\\n \u003cRadioButton value=\\\"mysql\\\"\u003eMySQL\u003c/RadioButton\u003e\\n \u003cRadioButton value=\\\"redis\\\"\u003eRedis\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"$28\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Radio,\\n RadioGroup,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"more\\\"\u003e\\n \u003cLabel\u003e\\n Täglicher Kaffeekonsum\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cRadio value=\\\"more\\\"\u003eMehr als 6 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"5-6\\\"\u003e5-6 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"3-4\\\"\u003e3-4 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"1-2\\\"\u003e1-2 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"none\\\"\u003eTrinke keinen Kaffee\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import {\\n Label,\\n RadioButton,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup\\n defaultValue=\\\"one\\\"\\n s={[1, 1]}\\n m={[1, 1, 1]}\\n l={[1, 1, 1, 1]}\\n\u003e\\n \u003cLabel\u003eBenutzerdefinierte Spalten\u003c/Label\u003e\\n \u003cRadioButton value=\\\"one\\\"\u003eSpalte 1\u003c/RadioButton\u003e\\n \u003cRadioButton value=\\\"two\\\"\u003eSpalte 2\u003c/RadioButton\u003e\\n \u003cRadioButton value=\\\"three\\\"\u003eSpalte 3\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"more\\\"\u003e\\n \u003cLabel\u003eTäglicher Kaffeekonsum\u003c/Label\u003e\\n \u003cRadio value=\\\"more\\\"\u003eMehr als 6 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"5-6\\\"\u003e5-6 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"3-4\\\"\u003e3-4 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"1-2\\\"\u003e1-2 Tassen\u003c/Radio\u003e\\n \u003cRadio value=\\\"none\\\"\u003eTrinke keinen Kaffee\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"error\":\"import {\\n FieldError,\\n Label,\\n RadioButton,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup isInvalid\u003e\\n \u003cLabel\u003eDatenbank-Typ\u003c/Label\u003e\\n \u003cRadioButton value=\\\"mysql\\\"\u003eMySQL\u003c/RadioButton\u003e\\n \u003cRadioButton value=\\\"redis\\\"\u003eRedis\u003c/RadioButton\u003e\\n \u003cFieldError\u003eBitte wähle eine Option aus\u003c/FieldError\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"fieldDescription\":\"import {\\n FieldDescription,\\n Heading,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"more\\\"\u003e\\n \u003cHeading level={4}\u003e\\n Wie viele Pflanzen besitzt du?\\n \u003c/Heading\u003e\\n \u003cRadio value=\\\"more\\\"\u003eMehr als 9 Pflanzen\u003c/Radio\u003e\\n \u003cRadio value=\\\"6-8\\\"\u003e6-8 Pflanzen\u003c/Radio\u003e\\n \u003cRadio value=\\\"3-5\\\"\u003e3-5 9 Pflanzen\u003c/Radio\u003e\\n \u003cRadio value=\\\"1-2\\\"\u003e1-2 Pflanzen\u003c/Radio\u003e\\n \u003cRadio value=\\\"none\\\"\u003eKeine\u003c/Radio\u003e\\n \u003cFieldDescription\u003e\\n Mehrere identische Pflanzen in einem Topf gelten als\\n eine Pflanze.\\n \u003c/FieldDescription\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"form\":\"$29\",\"hierarchyDo\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv style={{ display: \\\"flex\\\", justifyContent: \\\"center\\\" }}\u003e\\n \u003cRadioGroup defaultValue=\\\"espelkamp\\\"\u003e\\n \u003cLabel\u003eWohnort\u003c/Label\u003e\\n \u003cRadio value=\\\"espelkamp\\\"\u003eEspelkamp\u003c/Radio\u003e\\n \u003cRadio value=\\\"minden\\\"\u003eMinden\u003c/Radio\u003e\\n \u003cRadio value=\\\"rahden\\\"\u003eRahden\u003c/Radio\u003e\\n \u003cRadio value=\\\"others\\\"\u003eAndere\u003c/Radio\u003e\\n \u003c/RadioGroup\u003e\\n\u003c/div\u003e;\\n\",\"hierarchyDont\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv style={{ display: \\\"flex\\\", justifyContent: \\\"center\\\" }}\u003e\\n \u003cRadioGroup defaultValue=\\\"espelkamp\\\"\u003e\\n \u003cLabel\u003eWohnort\u003c/Label\u003e\\n \u003cRadio value=\\\"espelkamp\\\"\u003eEspelkamp\u003c/Radio\u003e\\n \u003cRadio value=\\\"minden\\\"\u003eMinden\u003c/Radio\u003e\\n \u003cRadio value=\\\"rahden\\\"\u003eRahden\u003c/Radio\u003e\\n \u003cRadio value=\\\"luebbecke\\\"\u003eLübbecke\u003c/Radio\u003e\\n \u003c/RadioGroup\u003e\\n\u003c/div\u003e;\\n\",\"introduction\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n \u003cLabel\u003eRolle\u003c/Label\u003e\\n \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"labelDo\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv\\n style={{\\n display: \\\"flex\\\",\\n flexDirection: \\\"column\\\",\\n alignItems: \\\"center\\\",\\n }}\\n\u003e\\n \u003cLabel\u003eFilter\u003c/Label\u003e\\n \u003cLabel\u003eZahlungsmethode\u003c/Label\u003e\\n\u003c/div\u003e;\\n\",\"labelDont\":\"import { Label } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv\\n style={{\\n display: \\\"flex\\\",\\n flexDirection: \\\"column\\\",\\n alignItems: \\\"center\\\",\\n }}\\n\u003e\\n \u003cLabel\u003e\\n Wähle hier die passende Filtermöglichkeit aus:\\n \u003c/Label\u003e\\n \u003cLabel\u003eWie möchtest du den Vorgang bezahlen?\u003c/Label\u003e\\n\u003c/div\u003e;\\n\",\"optionsDo\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv style={{ display: \\\"flex\\\", justifyContent: \\\"center\\\" }}\u003e\\n \u003cRadioGroup defaultValue=\\\"0-10\\\"\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003cRadio value=\\\"0-10\\\"\u003e0-10 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"11-20\\\"\u003e11-20 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"21-30\\\"\u003e21-30 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"31-40\\\"\u003e31-40 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"41+\\\"\u003e41+ Jahre\u003c/Radio\u003e\\n \u003c/RadioGroup\u003e\\n\u003c/div\u003e;\\n\",\"optionsDont\":\"import {\\n Label,\\n Radio,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv style={{ display: \\\"flex\\\", justifyContent: \\\"center\\\" }}\u003e\\n \u003cRadioGroup defaultValue=\\\"0-10\\\"\u003e\\n \u003cLabel\u003eAlter\u003c/Label\u003e\\n \u003cRadio value=\\\"0-10\\\"\u003e0-10 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"10-20\\\"\u003e11-20 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"20-30\\\"\u003e21-30 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"30-40\\\"\u003e31-40 Jahre\u003c/Radio\u003e\\n \u003cRadio value=\\\"40+\\\"\u003e40+ Jahre\u003c/Radio\u003e\\n \u003c/RadioGroup\u003e\\n\u003c/div\u003e;\\n\",\"states\":\"import {\\n RadioButton,\\n RadioGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRadioGroup\\n defaultValue=\\\"selected\\\"\\n l={[1, 1]}\\n aria-label=\\\"states\\\"\\n\u003e\\n \u003cRadioButton value=\\\"default\\\"\u003eDomain buchen\u003c/RadioButton\u003e\\n \u003cRadioButton value=\\\"selected\\\"\u003eDomain buchen\u003c/RadioButton\u003e\\n \u003cRadioButton isDisabled value=\\\"default\\\"\u003e\\n Domain buchen\\n \u003c/RadioButton\u003e\\n \u003cRadioButton isDisabled value=\\\"selected\\\"\u003e\\n Domain buchen\\n \u003c/RadioButton\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\":\"SearchField\",\"description\":\"Ein SearchField ermöglicht es dem Benutzer, eine Suchanfrage einzugeben und zu löschen.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n SearchField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cSearchField /\u003e\\n \u003cButton\u003eSuchen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"default\":\"import { SearchField } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSearchField /\u003e;\\n\",\"form\":\"import {\\n Button,\\n SearchField,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ search: string }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"search\\\"\\n rules={{\\n required: \\\"Bitte gib etwas in die Suche ein\\\",\\n }}\\n \u003e\\n \u003cSearchField /\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSuchen\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"search-field\"],\"filename\":\"03-components/form-controls/search-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"SegmentedControl\",\"description\":\"Ein SegmentedControl bietet dem User eine Einfachauswahl von 2 bis 5 kurzen Optionen. Je nach Einsatzzweck kann die Auswahl des Users den Inhalt unter dem Segmented Control verändern.\"},\"scope\":{}},\"examples\":{\"changeContent\":\"$2a\",\"compact\":\"import {\\n ColumnLayout,\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n \u003cSegmentedControl\\n defaultValue=\\\"entwickler\\\"\\n containerBreakpointSize=\\\"xl\\\"\\n \u003e\\n \u003cLabel\u003eRolle\u003c/Label\u003e\\n \u003cSegment value=\\\"entwickler\\\"\u003eEntwickler\u003c/Segment\u003e\\n \u003cSegment value=\\\"geschäftsführer\\\"\u003e\\n Geschäftsführer\\n \u003c/Segment\u003e\\n \u003cSegment value=\\\"andere\\\"\u003eAndere\u003c/Segment\u003e\\n \u003c/SegmentedControl\u003e\\n\\n \u003cSegmentedControl\\n defaultValue=\\\"entwickler\\\"\\n containerBreakpointSize=\\\"xs\\\"\\n \u003e\\n \u003cLabel\u003eRolle\u003c/Label\u003e\\n \u003cSegment value=\\\"entwickler\\\"\u003eEntwickler\u003c/Segment\u003e\\n \u003cSegment value=\\\"geschäftsführer\\\"\u003e\\n Geschäftsführer\\n \u003c/Segment\u003e\\n \u003cSegment value=\\\"andere\\\"\u003eAndere\u003c/Segment\u003e\\n \u003c/SegmentedControl\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Segment,\\n SegmentedControl,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"lastschrift\\\"\u003e\\n \u003cLabel\u003e\\n Zahlungsart\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cSegment value=\\\"lastschrift\\\"\u003eLastschrift\u003c/Segment\u003e\\n \u003cSegment value=\\\"Rechnung\\\"\u003eRechnung\u003c/Segment\u003e\\n\u003c/SegmentedControl\u003e;\\n\",\"default\":\"import {\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"lastschrift\\\"\u003e\\n \u003cLabel\u003eZahlungsart\u003c/Label\u003e\\n \u003cSegment value=\\\"lastschrift\\\"\u003eLastschrift\u003c/Segment\u003e\\n \u003cSegment value=\\\"Rechnung\\\"\u003eRechnung\u003c/Segment\u003e\\n\u003c/SegmentedControl\u003e;\\n\",\"fieldDescription\":\"import {\\n FieldDescription,\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"cloud\\\"\u003e\\n \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n \u003cSegment value=\\\"cloud\\\"\u003eCloud\u003c/Segment\u003e\\n \u003cSegment value=\\\"lokal\\\"\u003eLokal\u003c/Segment\u003e\\n \u003cFieldDescription\u003e\\n Speicherplatz kann jederzeit geändert werden\\n \u003c/FieldDescription\u003e\\n\u003c/SegmentedControl\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n Section,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ payment: \\\"debit\\\" | \\\"invoice\\\" }\u003e({\\n defaultValues: { payment: \\\"debit\\\" },\\n });\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"payment\\\"\\n rules={{\\n required: \\\"Bitte wähle eine Zahlungsart aus\\\",\\n }}\\n \u003e\\n \u003cSegmentedControl\u003e\\n \u003cLabel\u003eZahlungsart\u003c/Label\u003e\\n \u003cSegment value=\\\"debit\\\"\u003eLastschrift\u003c/Segment\u003e\\n \u003cSegment value=\\\"invoice\\\"\u003eRechnung\u003c/Segment\u003e\\n \u003c/SegmentedControl\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"playground\":\"import {\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"ssh-key\\\"\u003e\\n \u003cLabel\u003eAuthentifizierungsart\u003c/Label\u003e\\n \u003cSegment value=\\\"ssh-key\\\"\u003eSSH-Key\u003c/Segment\u003e\\n \u003cSegment value=\\\"passwort\\\"\u003ePasswort\u003c/Segment\u003e\\n\u003c/SegmentedControl\u003e;\\n\",\"states\":\"import {\\n Label,\\n Section,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cSegmentedControl defaultValue=\\\"dev\\\"\u003e\\n \u003cLabel\u003eRolle\u003c/Label\u003e\\n \u003cSegment value=\\\"entwickler\\\"\u003eEntwickler\u003c/Segment\u003e\\n \u003cSegment value=\\\"designer\\\"\u003eDesigner\u003c/Segment\u003e\\n \u003cSegment value=\\\"geschäftsführer\\\"\u003e\\n Geschäftsführer\\n \u003c/Segment\u003e\\n \u003cSegment value=\\\"andere\\\"\u003eAndere\u003c/Segment\u003e\\n \u003c/SegmentedControl\u003e\\n \u003cSegmentedControl defaultValue=\\\"dev\\\" isDisabled\u003e\\n \u003cLabel\u003eRolle\u003c/Label\u003e\\n \u003cSegment value=\\\"entwickler\\\"\u003eEntwickler\u003c/Segment\u003e\\n \u003cSegment value=\\\"designer\\\"\u003eDesigner\u003c/Segment\u003e\\n \u003cSegment value=\\\"geschäftsführer\\\"\u003e\\n Geschäftsführer\\n \u003c/Segment\u003e\\n \u003cSegment value=\\\"andere\\\"\u003eAndere\u003c/Segment\u003e\\n \u003c/SegmentedControl\u003e\\n\u003c/Section\u003e;\\n\",\"textDo\":\"import {\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"individuell\\\"\u003e\\n \u003cLabel\u003eEinstellung\u003c/Label\u003e\\n \u003cSegment value=\\\"standard\\\"\u003eStandard\u003c/Segment\u003e\\n \u003cSegment value=\\\"individuell\\\"\u003eIndividuell\u003c/Segment\u003e\\n\u003c/SegmentedControl\u003e;\\n\",\"textDont\":\"import {\\n Label,\\n Segment,\\n SegmentedControl,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSegmentedControl defaultValue=\\\"individuell\\\"\u003e\\n \u003cLabel\u003eWähle deine Einstellungsart aus:\u003c/Label\u003e\\n \u003cSegment value=\\\"standard\\\"\u003eStandard-Einstellungen\u003c/Segment\u003e\\n \u003cSegment value=\\\"individuell\\\"\u003e\\n Individuell einstellbare Einstellungen\\n \u003c/Segment\u003e\\n\u003c/SegmentedControl\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"segmented-control\"],\"filename\":\"03-components/form-controls/segmented-control/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n Select,\\n Label,\\n Option,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cSelect\u003e\\n \u003cLabel\u003eApp\u003c/Label\u003e\\n \u003cOption\u003eWordPress\u003c/Option\u003e\\n \u003cOption\u003eTYPO3\u003c/Option\u003e\\n \u003cOption\u003eContao\u003c/Option\u003e\\n \u003cOption\u003eDrupal\u003c/Option\u003e\\n \u003cOption\u003eJoomla!\u003c/Option\u003e\\n \u003cOption\u003eMatomo\u003c/Option\u003e\\n \u003c/Select\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Option,\\n Select,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSelect\u003e\\n \u003cLabel\u003e\\n App\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n \u003cOption\u003eWordPress\u003c/Option\u003e\\n \u003cOption\u003eTYPO3\u003c/Option\u003e\\n \u003cOption\u003eContao\u003c/Option\u003e\\n \u003cOption\u003eDrupal\u003c/Option\u003e\\n \u003cOption\u003eJoomla!\u003c/Option\u003e\\n \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\",\"default\":\"import {\\n Label,\\n Option,\\n Select,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSelect\u003e\\n \u003cLabel\u003eApp\u003c/Label\u003e\\n \u003cOption\u003eWordPress\u003c/Option\u003e\\n \u003cOption\u003eTYPO3\u003c/Option\u003e\\n \u003cOption\u003eContao\u003c/Option\u003e\\n \u003cOption\u003eDrupal\u003c/Option\u003e\\n \u003cOption\u003eJoomla!\u003c/Option\u003e\\n \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\",\"defaultValue\":\"import {\\n Label,\\n Option,\\n Select,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSelect defaultSelectedKey=\\\"wordpress\\\" isRequired\u003e\\n \u003cLabel\u003eApp\u003c/Label\u003e\\n \u003cOption value=\\\"wordpress\\\"\u003eWordPress\u003c/Option\u003e\\n \u003cOption value=\\\"typo3\\\"\u003eTYPO3\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\",\"fieldDescription\":\"import {\\n FieldDescription,\\n Label,\\n Option,\\n Select,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSelect\u003e\\n \u003cLabel\u003eApp\u003c/Label\u003e\\n \u003cOption\u003eWordPress\u003c/Option\u003e\\n \u003cOption\u003eTYPO3\u003c/Option\u003e\\n \u003cOption\u003eContao\u003c/Option\u003e\\n \u003cOption\u003eDrupal\u003c/Option\u003e\\n \u003cOption\u003eJoomla!\u003c/Option\u003e\\n \u003cOption\u003eMatomo\u003c/Option\u003e\\n \u003cFieldDescription\u003eWeitere Informationen\u003c/FieldDescription\u003e\\n\u003c/Select\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n Option,\\n Section,\\n Select,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ app: string }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"app\\\"\\n rules={{\\n required: \\\"Bitte wähle eine App aus\\\",\\n }}\\n \u003e\\n \u003cSelect\u003e\\n \u003cLabel\u003eApp\u003c/Label\u003e\\n \u003cOption value=\\\"wordpress\\\"\u003eWordPress\u003c/Option\u003e\\n \u003cOption value=\\\"typo3\\\"\u003eTYPO3\u003c/Option\u003e\\n \u003c/Select\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\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 {\\n Label,\\n Slider,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSlider\\n formatOptions={{\\n style: \\\"unit\\\",\\n unit: \\\"gigabyte\\\",\\n }}\\n minValue={20}\\n maxValue={2000}\\n defaultValue={200}\\n step={20}\\n showInitialMarker\\n\u003e\\n \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\",\"form\":\"$2b\"},\"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\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import { Switch } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import { Switch } from \\\"@mittwald/flow-react-components\\\";\\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\":{\"align\":\"import {\\n Align,\\n Button,\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cTextArea\u003e\\n \u003cLabel\u003eNachricht\u003c/Label\u003e\\n \u003c/TextArea\u003e\\n \u003cButton\u003eSenden\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"characterCount\":\"import {\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n TextArea,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea\u003e\\n \u003cLabel\u003e\\n Public Key\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import {\\n FieldDescription,\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea\u003e\\n \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import {\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n Section,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ message: string }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"message\\\"\\n rules={{\\n required: \\\"Bitte gib eine Nachricht ein\\\",\\n }}\\n \u003e\\n \u003cTextArea\u003e\\n \u003cLabel\u003eNachricht\u003c/Label\u003e\\n \u003c/TextArea\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSenden\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"invalid\":\"import {\\n FieldError,\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import {\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea isRequired\u003e\\n \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"resizeable\":\"import {\\n Label,\\n TextArea,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextArea rows={1} autoResizeMaxRows={5}\u003e\\n \u003cLabel\u003eNachricht\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 Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eWeiterleitungsziel\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"characterCount\":\"import {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eVorname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eNachname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cColumnLayout s={[2, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eStraße\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/ColumnLayout\u003e\\n \u003cColumnLayout s={[2, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eStadt\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003ePLZ\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/ColumnLayout\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eLand\u003c/Label\u003e\\n \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n Text,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField\u003e\\n \u003cLabel\u003e\\n URL\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"default\":\"import {\\n FieldDescription,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"defaultValue\":\"import {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField isDisabled\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n Section,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ url: string }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"url\\\"\\n rules={{\\n required: \\\"Bitte gib eine URL ein\\\",\\n }}\\n \u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"inputProps\":\"import {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n \u003cLabel\u003eE-Mail\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import {\\n FieldError,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"placeholder\":\"import {\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eURL\u003c/Label\u003e\\n \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import {\\n FieldDescription,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\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\":\"TimeField\",\"description\":\"Das TimeField wird dafür verwendet eine Uhrzeit auszuwählen.\"},\"scope\":{}},\"examples\":{\"contextualHelp\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Label,\\n TimeField,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTimeField\u003e\\n \u003cLabel\u003e\\n Uhrzeit\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eWeitere Informationen\u003c/Heading\u003e\\n \u003cText\u003e\\n Hier gibt es weitere Informationen, die zu lang\\n für die FieldDescription sind.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n \u003c/Label\u003e\\n\u003c/TimeField\u003e;\\n\",\"default\":\"import {\\n Label,\\n TimeField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTimeField\u003e\\n \u003cLabel\u003eUhrzeit\u003c/Label\u003e\\n\u003c/TimeField\u003e;\\n\",\"disabled\":\"import {\\n Label,\\n TimeField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTimeField isDisabled\u003e\\n \u003cLabel\u003eDatum\u003c/Label\u003e\\n\u003c/TimeField\u003e;\\n\",\"form\":\"import {\\n Button,\\n Label,\\n Section,\\n TimeField,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport {\\n Form,\\n typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { sleep } from \\\"@/content/03-components/actions/action/examples/lib\\\";\\nimport type { CalendarDateTime } from \\\"@internationalized/date\\\";\\n\\nexport default () =\u003e {\\n const form = useForm\u003c{ time: CalendarDateTime }\u003e();\\n const Field = typedField(form);\\n\\n return (\\n \u003cSection\u003e\\n \u003cForm form={form} onSubmit={sleep}\u003e\\n \u003cField\\n name=\\\"time\\\"\\n rules={{\\n required: \\\"Bitte gib eine Uhrzeit ein\\\",\\n }}\\n \u003e\\n \u003cTimeField\u003e\\n \u003cLabel\u003eUhrzeit\u003c/Label\u003e\\n \u003c/TimeField\u003e\\n \u003c/Field\u003e\\n \u003cButton type=\\\"submit\\\"\u003eSpeichern\u003c/Button\u003e\\n \u003c/Form\u003e\\n \u003c/Section\u003e\\n );\\n};\\n\",\"granularity\":\"import {\\n Label,\\n TimeField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cTimeField granularity=\\\"hour\\\"\u003e\\n \u003cLabel\u003eStunde\u003c/Label\u003e\\n \u003c/TimeField\u003e\\n \u003cTimeField\u003e\\n \u003cLabel\u003eStunde und Minute\u003c/Label\u003e\\n \u003c/TimeField\u003e\\n \u003cTimeField granularity=\\\"second\\\"\u003e\\n \u003cLabel\u003eStunde, Minute und Sekunde\u003c/Label\u003e\\n \u003c/TimeField\u003e\\n\u003c/Row\u003e;\\n\",\"minMax\":\"import {\\n FieldDescription,\\n Label,\\n TimeField,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { Time } from \\\"@internationalized/date\\\";\\n\\n\u003cTimeField\\n minValue={new Time(8, 0)}\\n maxValue={new Time(16, 0)}\\n\u003e\\n \u003cLabel\u003eUhrzeit\u003c/Label\u003e\\n \u003cFieldDescription\u003eZwischen 8 und 16 Uhr\u003c/FieldDescription\u003e\\n\u003c/TimeField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"time-field\"],\"filename\":\"03-components/form-controls/time-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die 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 {\\n Breadcrumb,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"default\":\"import {\\n Breadcrumb,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBreadcrumb\u003e\\n \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"light\":\"import {\\n Breadcrumb,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\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\":\"import {\\n Avatar,\\n Button,\\n ContextMenu,\\n ContextMenuTrigger,\\n HeaderNavigation,\\n IconLogout,\\n IconNotification,\\n IconSearch,\\n IconSettings,\\n IconSupport,\\n Image,\\n MenuItem,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n \u003cButton\u003e\\n \u003cIconSearch /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cIconSupport /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cIconNotification /\u003e\\n \u003c/Button\u003e\\n \u003cContextMenuTrigger\u003e\\n \u003cButton\u003e\\n \u003cAvatar\u003e\\n \u003cImage\\n alt=\\\"Gopher\\\"\\n src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n /\u003e\\n \u003c/Avatar\u003e\\n \u003c/Button\u003e\\n \u003cContextMenu\u003e\\n \u003cMenuItem\u003e\\n \u003cIconSettings /\u003e\\n \u003cText\u003eProfil\u003c/Text\u003e\\n \u003c/MenuItem\u003e\\n \u003cMenuItem\u003e\\n \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\",\"dark\":\"import {\\n Button,\\n HeaderNavigation,\\n IconSearch,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeaderNavigation\\n aria-label=\\\"Header navigation\\\"\\n color=\\\"dark\\\"\\n\u003e\\n \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n Components\\n \u003c/Link\u003e\\n \u003cButton\u003e\\n \u003cIconSearch /\u003e\\n \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"default\":\"import {\\n Button,\\n HeaderNavigation,\\n IconSearch,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n Komponenten\\n \u003c/Link\u003e\\n \u003cButton\u003e\\n \u003cIconSearch /\u003e\\n \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"light\":\"import {\\n Button,\\n HeaderNavigation,\\n IconSearch,\\n Link,\\n} from \\\"@mittwald/flow-react-components\\\";\\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\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n Dark\\n\u003c/Link\u003e;\\n\",\"default\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"disabled\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink href=\\\"#\\\" isDisabled\u003e\\n Disabled\\n\u003c/Link\u003e;\\n\",\"download\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink download\u003eRechnung herunterladen\u003c/Link\u003e;\\n\",\"external\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\" target=\\\"_blank\\\"\u003e\\n Externer Link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import {\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an, um\\n weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\",\"light\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n Light\\n\u003c/Link\u003e;\\n\",\"position1\":\"import {\\n Header,\\n Heading,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eHeading 2\u003c/Heading\u003e\\n \u003cLink href=\\\"#\\\"\u003eTextlink\u003c/Link\u003e\\n \u003c/Header\u003e\\n \u003cText\u003e\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\\n \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"position2\":\"import {\\n Header,\\n Heading,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eHeading 2\u003c/Heading\u003e\\n \u003c/Header\u003e\\n \u003cText\u003e\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\"\u003eTextlink\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"primary\":\"import { Link } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003ePrimary\u003c/Link\u003e;\\n\",\"writingExtraDo\":\"import {\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003c\u003e\\n \u003cText\u003e\\n Links sind wichte Navigationselemente innerhalb von\\n Benutzeroberflächen.\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\"\u003eErfahre mehr über Links\u003c/Link\u003e\\n\u003c/\u003e;\\n\",\"writingExtraDont\":\"import {\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003c\u003e\\n \u003cText\u003e\\n Links sind wichte Navigationselemente innerhalb von\\n Benutzeroberflächen.\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\"\u003eErfahre mehr\u003c/Link\u003e\\n\u003c/\u003e;\\n\",\"writingInlineDo\":\"import {\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n Mit Hilfe des \u003cLink href=\\\"#\\\"\u003eOnboardings\u003c/Link\u003e kannst du\\n direkt loslegen.\\n\u003c/Text\u003e;\\n\",\"writingInlineDont\":\"import {\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cText\u003e\\n \u003cLink href=\\\"#\\\"\u003e\\n Mit Hilfe des Onboardings kannst du direkt loslegen.\\n \u003c/Link\u003e\\n\u003c/Text\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 {\\n Label,\\n Link,\\n Navigation,\\n NavigationGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n \u003cNavigationGroup collapsable\u003e\\n \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n Performance\\n \u003c/Link\u003e\\n \u003c/NavigationGroup\u003e\\n \u003cNavigationGroup collapsable\u003e\\n \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import {\\n Link,\\n Navigation,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n mittwald\\n \u003c/Link\u003e\\n \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import {\\n Label,\\n Link,\\n Navigation,\\n NavigationGroup,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n \u003cNavigationGroup\u003e\\n \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n Performance\\n \u003c/Link\u003e\\n \u003c/NavigationGroup\u003e\\n \u003cNavigationGroup\u003e\\n \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import {\\n IconCustomer,\\n IconProject,\\n IconServer,\\n Link,\\n Navigation,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n \u003cLink href=\\\"#\\\"\u003e\\n \u003cIconCustomer /\u003e\\n \u003cText\u003eOrganisationen\u003c/Text\u003e\\n \u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n \u003cIconServer /\u003e\\n \u003cText\u003eServer\u003c/Text\u003e\\n \u003c/Link\u003e\\n \u003cLink href=\\\"#\\\"\u003e\\n \u003cIconProject /\u003e\\n \u003cText\u003eProjekte\u003c/Text\u003e\\n \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"separator\":\"import {\\n Label,\\n Link,\\n Navigation,\\n NavigationGroup,\\n Separator,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n \u003cNavigationGroup\u003e\\n \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n Performance\\n \u003c/Link\u003e\\n \u003c/NavigationGroup\u003e\\n\\n \u003cSeparator /\u003e\\n\\n \u003cNavigationGroup\u003e\\n \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\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 {\\n Tab,\\n Tabs,\\n TabTitle,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n Allgemeiner Inhalt\\n \u003c/Tab\u003e\\n \u003cTab id=\\\"storage\\\"\u003e\\n \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n Speicherplatz Inhalt\\n \u003c/Tab\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n Spamschutz Inhalt\\n \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$2c\",\"default-selected\":\"import {\\n Tab,\\n Tabs,\\n TabTitle,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTabs defaultSelectedKey=\\\"storage\\\"\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n Allgemeiner Inhalt\\n \u003c/Tab\u003e\\n \u003cTab id=\\\"storage\\\"\u003e\\n \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n Speicherplatz Inhalt\\n \u003c/Tab\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n Spamschutz Inhalt\\n \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"default\":\"import {\\n Tab,\\n Tabs,\\n TabTitle,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTabs\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n Allgemeiner Inhalt\\n \u003c/Tab\u003e\\n \u003cTab id=\\\"storage\\\"\u003e\\n \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n Speicherplatz Inhalt\\n \u003c/Tab\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n Spamschutz Inhalt\\n \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n Alert,\\n AlertIcon,\\n Heading,\\n Tab,\\n Tabs,\\n TabTitle,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTabs\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n Allgemeiner Inhalt\\n \u003c/Tab\u003e\\n \u003cTab id=\\\"storage\\\"\u003e\\n \u003cTabTitle\u003e\\n Speicherplatz\\n \u003cAlertIcon status=\\\"danger\\\" /\u003e\\n \u003c/TabTitle\u003e\\n \u003cAlert status=\\\"danger\\\"\u003e\\n \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n \u003c/Alert\u003e\\n \u003c/Tab\u003e\\n \u003cTab\u003e\\n \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n Spamschutz Inhalt\\n \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"align\":\"import {\\n Align,\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n\\n \u003cContextualHelp\u003e\\n \u003cText\u003e\\n Hier wird die URL des Servers angezeigt, der für den\\n E-Mail-Versand genutzt wird.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n\u003c/Align\u003e;\\n\",\"default\":\"import {\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Heading,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n\\n \u003cContextualHelp\u003e\\n \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n \u003cText\u003e\\n Jedem Benutzer-Profil wird im mStudio je Projekt\\n und/oder Organisation eine Rolle zugewiesen. Das\\n ermöglicht dir ein ganz neues und modernes Arbeiten.\\n \u003c/Text\u003e\\n \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n example: \\\"static\\\",\\n editorDisabled: true,\\n bgColor: \\\"dark\\\",\\n zoom: 0.7\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LightBox\",\"description\":\"Die LightBox dient dazu einzelne Elemente, wie Bilder, in einem Overlay anzuzeigen.\"},\"scope\":{}},\"examples\":{\"actions\":\"import {\\n ActionGroup,\\n Button,\\n IconDelete,\\n IconDownload,\\n Image,\\n LightBox,\\n LightBoxTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLightBoxTrigger\u003e\\n \u003cButton\u003eOpen LightBox\u003c/Button\u003e\\n \u003cLightBox\u003e\\n \u003cImage src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\" /\u003e\\n \u003cActionGroup\u003e\\n \u003cButton\u003e\\n \u003cIconDownload /\u003e\\n \u003c/Button\u003e\\n \u003cButton\u003e\\n \u003cIconDelete /\u003e\\n \u003c/Button\u003e\\n \u003c/ActionGroup\u003e\\n \u003c/LightBox\u003e\\n\u003c/LightBoxTrigger\u003e;\\n\",\"default\":\"import {\\n Button,\\n Image,\\n LightBox,\\n LightBoxTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLightBoxTrigger\u003e\\n \u003cButton\u003eOpen LightBox\u003c/Button\u003e\\n \u003cLightBox\u003e\\n \u003cImage src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\" /\u003e\\n \u003c/LightBox\u003e\\n\u003c/LightBoxTrigger\u003e;\\n\",\"fitScreenFalse\":\"import {\\n Button,\\n Image,\\n LightBox,\\n LightBoxTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLightBoxTrigger\u003e\\n \u003cButton\u003eOpen LightBox\u003c/Button\u003e\\n \u003cLightBox fitScreen={false}\u003e\\n \u003cImage src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\" /\u003e\\n \u003c/LightBox\u003e\\n\u003c/LightBoxTrigger\u003e;\\n\",\"imageTrigger\":\"import {\\n Button,\\n Image,\\n LightBox,\\n LightBoxTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLightBoxTrigger\u003e\\n \u003cButton\u003e\\n \u003cImage\\n width={100}\\n withBorder\\n alt=\\\"mittwald\\\"\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n /\u003e\\n \u003c/Button\u003e\\n \u003cLightBox\u003e\\n \u003cImage\\n alt=\\\"mittwald\\\"\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n /\u003e\\n \u003c/LightBox\u003e\\n\u003c/LightBoxTrigger\u003e;\\n\",\"static\":\"import {\\n Button,\\n IconClose,\\n Image,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cdiv\\n className=\\\"flow--light-box flow--light-box--fit-screen\\\"\\n style={{ backgroundColor: \\\"transparent\\\" }}\\n\u003e\\n \u003csection role=\\\"dialog\\\"\u003e\\n \u003cdiv className=\\\"flow--light-box--content\\\"\u003e\\n \u003cImage\\n width={200}\\n src=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n /\u003e\\n \u003c/div\u003e\\n \u003cdiv className=\\\"flow--light-box--actions\\\"\u003e\\n \u003cButton color=\\\"light\\\" variant=\\\"soft\\\"\u003e\\n \u003cIconClose /\u003e\\n \u003c/Button\u003e\\n \u003c/div\u003e\\n \u003c/section\u003e\\n\u003c/div\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"light-box\"],\"filename\":\"03-components/overlays/light-box/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n example: \\\"static\\\",\\n editorDisabled: true,\\n bgColor: \\\"light\\\",\\n zoom: 0.7\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite an, wodurch der Nutzer sich voll auf den Inhalt des Modals konzentrieren kann.\"},\"scope\":{}},\"examples\":{\"controller\":\"$2d\",\"default\":\"$2e\",\"email\":\"import {\\n Action,\\n ActionGroup,\\n Button,\\n Heading,\\n IconEmail,\\n Label,\\n Text,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cHeading\u003e\\n \u003cIconEmail /\u003e\\n E-Mail-Adresse anlegen\\n \u003c/Heading\u003e\\n \u003cText\u003e\\n Erstelle dir eine E-Mail-Adresse mit Postfach\\n Speicherplatz.\\n \u003c/Text\u003e\\n \u003cTextField type=\\\"email\\\"\u003e\\n \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cAction closeOverlay=\\\"Modal\\\"\u003e\\n \u003cButton color=\\\"accent\\\"\u003eE-Mail-Adresse anlegen\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n \u003c/Action\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\",\"form\":\"$2f\",\"headingsDo\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cHeading level={4}\u003eE-Mail-Adresse bearbeiten\u003c/Heading\u003e\\n \u003cHeading level={4}\u003eProjekt wirklich löschen?\u003c/Heading\u003e\\n \u003cHeading level={4}\u003e\\n Projekt wirklich löschen? - App auswählen\\n \u003c/Heading\u003e\\n\u003c/Column\u003e;\\n\",\"headingsDont\":\"import { Heading } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumn\u003e\\n \u003cHeading level={4}\u003e\\n Bearbeite hier deine E-Mail-Adresse\\n \u003c/Heading\u003e\\n \u003cHeading level={4}\u003eProjektlöschvorgang starten\u003c/Heading\u003e\\n \u003cHeading level={4}\u003eWähle hier eine App aus\u003c/Heading\u003e\\n\u003c/Column\u003e;\\n\",\"noAction\":\"import {\\n Action,\\n ActionGroup,\\n Button,\\n Heading,\\n Section,\\n Switch,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cheader className=\\\"flow--modal--header\\\"\u003e\\n \u003cHeading\u003eEinstellungen\u003c/Heading\u003e\\n \u003c/header\u003e\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cSection\u003e\\n \u003cSwitch defaultSelected\u003e\\n Container Frontend anzeigen\\n \u003c/Switch\u003e\\n \u003cSwitch\u003eExtensions anzeigen\u003c/Switch\u003e\\n \u003c/Section\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cAction closeOverlay=\\\"Modal\\\"\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Schließen\\n \u003c/Button\u003e\\n \u003c/Action\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\",\"offCanvas\":\"$30\",\"size\":\"$31\",\"static\":\"import {\\n Action,\\n ActionGroup,\\n Button,\\n Heading,\\n Label,\\n Section,\\n Text,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cStaticModal\u003e\\n \u003cheader className=\\\"flow--modal--header\\\"\u003e\\n \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\\n \u003c/header\u003e\\n\\n \u003cdiv className=\\\"flow--modal--content\\\"\u003e\\n \u003cSection\u003e\\n \u003cText\u003e\\n Eine Organisation kannst du dir wie ein Unternehmen\\n vorstellen. An diesem Ort verwaltest du deine\\n Mitarbeiter, Zahlungsmodalitäten und kannst deine\\n Rechnungen einsehen.\\n \u003c/Text\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/Section\u003e\\n \u003c/div\u003e\\n \u003cActionGroup className=\\\"flow--modal--action-group\\\"\u003e\\n \u003cAction closeOverlay=\\\"Modal\\\"\u003e\\n \u003cButton color=\\\"accent\\\"\u003eOrganisation anlegen\u003c/Button\u003e\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Abbrechen\\n \u003c/Button\u003e\\n \u003c/Action\u003e\\n \u003c/ActionGroup\u003e\\n\u003c/StaticModal\u003e;\\n\"},\"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\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Button,\\n IconEdit,\\n Tooltip,\\n TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTooltipTrigger\u003e\\n \u003cButton aria-label=\\\"Bearbeiten\\\" variant=\\\"plain\\\"\u003e\\n \u003cIconEdit /\u003e\\n \u003c/Button\u003e\\n \u003cTooltip\u003eBearbeiten\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\":\"AlertBadge\",\"description\":\"Der AlertBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import { AlertBadge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlertBadge\u003eArchiviert\u003c/AlertBadge\u003e;\\n\",\"status\":\"import { AlertBadge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cAlertBadge status=\\\"info\\\"\u003eArchiviert\u003c/AlertBadge\u003e\\n \u003cAlertBadge status=\\\"success\\\"\u003e\\n Update erfolgreich\\n \u003c/AlertBadge\u003e\\n \u003cAlertBadge status=\\\"warning\\\"\u003e\\n Speicher fast voll\\n \u003c/AlertBadge\u003e\\n \u003cAlertBadge status=\\\"danger\\\"\u003eSpeicher voll\u003c/AlertBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"alert-badge\"],\"filename\":\"03-components/status/alert-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\":\"AlertIcon\",\"description\":\"Das AlertIcon dient zur Veranschaulichung eines Status, beispielsweise in einem AlertBadge oder Alert\"},\"scope\":{}},\"examples\":{\"default\":\"import { AlertIcon } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlertIcon /\u003e;\\n\",\"status\":\"import { AlertIcon } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cAlertIcon status=\\\"info\\\" /\u003e\\n \u003cAlertIcon status=\\\"success\\\" /\u003e\\n \u003cAlertIcon status=\\\"warning\\\" /\u003e\\n \u003cAlertIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"alert-icon\"],\"filename\":\"03-components/status/alert-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Alert\",\"description\":\"Der Alert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Alert,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlert\u003e\\n \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/Alert\u003e;\\n\",\"status\":\"$32\",\"with-content\":\"import {\\n Alert,\\n Button,\\n Content,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlert\u003e\\n \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n \u003cContent\u003e\\n Da deine Domain gelöscht wurde, wurde diese\\n E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n senden zu können musst du die Adresse wieder umbenennen.\\n \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n \u003c/Content\u003e\\n\u003c/Alert\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"alert\"],\"filename\":\"03-components/status/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\":\"Badge\",\"description\":\"Der Badge wird üblicherweise dafür genutzt Gruppen von zusammengehörigen Metadaten anzuzeigen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import {\\n Badge,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cBadge color=\\\"neutral\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"blue\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"navy\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"violet\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"teal\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"lilac\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"green\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"orange\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n \u003cBadge color=\\\"red\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n \u003c/Badge\u003e\\n\u003c/Row\u003e;\\n\",\"dark\":\"import {\\n Badge,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge color=\\\"dark\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n\u003c/Badge\u003e;\\n\",\"default\":\"import { Badge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge\u003eValue\u003c/Badge\u003e;\\n\",\"disabled\":\"import {\\n Badge,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge color=\\\"neutral\\\" isDisabled\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n\u003c/Badge\u003e;\\n\",\"light\":\"import {\\n Badge,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge color=\\\"light\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n\u003c/Badge\u003e;\\n\",\"onClose\":\"import { Badge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge\\n onClose={() =\u003e {\\n alert(\\\"closed!\\\");\\n }}\\n\u003e\\n Value\\n\u003c/Badge\u003e;\\n\",\"onPress\":\"import { Badge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge\\n onPress={() =\u003e {\\n alert(\\\"pressed!\\\");\\n }}\\n\u003e\\n Value\\n\u003c/Badge\u003e;\\n\",\"scope\":\"import {\\n Badge,\\n Label,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cBadge color=\\\"neutral\\\"\u003e\\n \u003cLabel\u003eScope\u003c/Label\u003e\\n \u003cText\u003eValue\u003c/Text\u003e\\n\u003c/Badge\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"badge\"],\"filename\":\"03-components/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\":\"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\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import { CounterBadge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import {\\n Button,\\n CounterBadge,\\n IconNotification,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n \u003cIconNotification /\u003e\\n \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import { CounterBadge } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-badge\"],\"filename\":\"03-components/status/counter-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\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import { LoadingSpinner } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import {\\n Button,\\n Heading,\\n Notification,\\n Text,\\n useNotificationController,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n const controller = useNotificationController();\\n\\n return (\\n \u003cButton\\n onPress={() =\u003e\\n controller.add(\\n \u003cNotification\\n onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n status=\\\"warning\\\"\\n autoClose\\n \u003e\\n \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n \u003cText\u003e\\n No SSL certificate could be issued for\\n examples.de.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e,\\n )\\n }\\n \u003e\\n Trigger Notification\\n \u003c/Button\u003e\\n );\\n};\\n\",\"default\":\"import {\\n Button,\\n Heading,\\n Notification,\\n Text,\\n useNotificationController,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n const controller = useNotificationController();\\n\\n return (\\n \u003cButton\\n onPress={() =\u003e\\n controller.add(\\n \u003cNotification\\n onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n status=\\\"warning\\\"\\n \u003e\\n \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n \u003cText\u003e\\n No SSL certificate could be issued for\\n examples.de.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e,\\n )\\n }\\n \u003e\\n Trigger Notification\\n \u003c/Button\u003e\\n );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Heading,\\n Notification,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cNotification\u003e\\n \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n \u003cText\u003e\\n Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n archiviert.\\n \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import {\\n Heading,\\n Notification,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cNotification status=\\\"info\\\"\u003e\\n \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n \u003cText\u003e\\n Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n archiviert.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e\\n\\n \u003cNotification status=\\\"warning\\\"\u003e\\n \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n \u003cText\u003e\\n Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n 80% voll.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e\\n\\n \u003cNotification status=\\\"danger\\\"\u003e\\n \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n \u003cText\u003e\\n Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n ausgestellt werden.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e\\n\\n \u003cNotification status=\\\"success\\\"\u003e\\n \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n \u003cText\u003e\\n Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n installiert.\\n \u003c/Text\u003e\\n \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"decimal\":\"import {\\n Label,\\n ProgressBar,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cProgressBar\\n value={500}\\n maxValue={1000}\\n minValue={0}\\n formatOptions={{ style: \\\"decimal\\\" }}\\n\u003e\\n \u003cLabel\u003eStückzahl\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"default\":\"import {\\n Label,\\n ProgressBar,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import {\\n Label,\\n ProgressBar,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cProgressBar\\n showMaxValue\\n value={500}\\n maxValue={1000}\\n minValue={0}\\n formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import {\\n Label,\\n ProgressBar,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import { ProgressBar } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cRow\u003e\\n \u003cProgressBar value={100} status=\\\"success\\\"\u003e\\n Success\\n \u003c/ProgressBar\u003e\\n \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n Info\\n \u003c/ProgressBar\u003e\\n \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n Warning\\n \u003c/ProgressBar\u003e\\n \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n Danger\\n \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\",\"unit\":\"import {\\n Label,\\n ProgressBar,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cProgressBar\\n value={500}\\n maxValue={1000}\\n minValue={0}\\n formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\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\":\"AccentBox\",\"description\":\"Die AccentBox dient dazu Inhalte dekorativ hervorzuheben.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n AccentBox,\\n Heading,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccentBox\u003e\\n \u003cSection\u003e\\n \u003cHeading\u003eTipps \u0026 Tricks für mehr Klimaschutz\u003c/Heading\u003e\\n \u003cText\u003e\\n Dein Cronjob läuft in weniger als\\n 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen.\\n Falls das nicht unbedingt nötig ist, kannst du ein\\n längeres Intervall wählen - das spart Energie und\\n schützt das Klima\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\" target=\\\"_blank\\\"\u003e\\n Blogartikel zu mehr Nachhaltigkeit\\n \u003c/Link\u003e\\n \u003c/Section\u003e\\n\u003c/AccentBox\u003e;\\n\",\"gradient\":\"import {\\n AccentBox,\\n Color,\\n Flex,\\n Heading,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccentBox color=\\\"gradient\\\"\u003e\\n \u003cFlex align=\\\"center\\\" wrap=\\\"wrap\\\" gap=\\\"m\\\"\u003e\\n \u003cFlex direction=\\\"column\\\" grow\u003e\\n \u003cHeading size=\\\"l\\\"\u003e\\n \u003cColor color=\\\"violet\\\"\u003emStudio Extension\u003c/Color\u003e{\\\" \\\"}\\n selber entwickeln\\n \u003c/Heading\u003e\\n \u003cText\u003e\\n \u003cb\u003e\\n \u003cColor\u003e\\n Veröffentliche{\\\" \\\"}\\n \u003cColor color=\\\"violet\\\"\u003eeigene Features\u003c/Color\u003e im\\n mStudio\\n \u003c/Color\u003e\\n \u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Flex\u003e\\n \u003cLink target=\\\"_blank\\\" href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n Contributor Landingpage\\n \u003c/Link\u003e\\n \u003c/Flex\u003e\\n\u003c/AccentBox\u003e;\\n\",\"green\":\"import {\\n AccentBox,\\n Heading,\\n Icon,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { IconLeaf } from \\\"@tabler/icons-react\\\";\\n\\n\u003cAccentBox color=\\\"green\\\"\u003e\\n \u003cIcon\u003e\\n \u003cIconLeaf /\u003e\\n \u003c/Icon\u003e\\n \u003cSection\u003e\\n \u003cHeading\u003eTipps \u0026 Tricks für mehr Klimaschutz\u003c/Heading\u003e\\n \u003cText\u003e\\n Dein Cronjob läuft in weniger als\\n 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen.\\n Falls das nicht unbedingt nötig ist, kannst du ein\\n längeres Intervall wählen - das spart Energie und\\n schützt das Klima\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\" target=\\\"_blank\\\"\u003e\\n Blogartikel zu mehr Nachhaltigkeit\\n \u003c/Link\u003e\\n \u003c/Section\u003e\\n\u003c/AccentBox\u003e;\\n\",\"icon\":\"import {\\n AccentBox,\\n Heading,\\n Icon,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport { IconLeaf } from \\\"@tabler/icons-react\\\";\\n\\n\u003cAccentBox\u003e\\n \u003cIcon\u003e\\n \u003cIconLeaf /\u003e\\n \u003c/Icon\u003e\\n \u003cSection\u003e\\n \u003cHeading\u003eTipps \u0026 Tricks für mehr Klimaschutz\u003c/Heading\u003e\\n \u003cText\u003e\\n Dein Cronjob läuft in weniger als\\n 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen.\\n Falls das nicht unbedingt nötig ist, kannst du ein\\n längeres Intervall wählen - das spart Energie und\\n schützt das Klima\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\" target=\\\"_blank\\\"\u003e\\n Blogartikel zu mehr Nachhaltigkeit\\n \u003c/Link\u003e\\n \u003c/Section\u003e\\n\u003c/AccentBox\u003e;\\n\",\"layoutCard\":\"import {\\n AccentBox,\\n Color,\\n Flex,\\n Heading,\\n LayoutCard,\\n Link,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLayoutCard\u003e\\n \u003cAccentBox color=\\\"gradient\\\"\u003e\\n \u003cFlex align=\\\"center\\\" wrap=\\\"wrap\\\" gap=\\\"m\\\"\u003e\\n \u003cFlex direction=\\\"column\\\" grow\u003e\\n \u003cHeading size=\\\"l\\\"\u003e\\n \u003cColor color=\\\"violet\\\"\u003emStudio Extension\u003c/Color\u003e{\\\" \\\"}\\n selber entwickeln\\n \u003c/Heading\u003e\\n \u003cText\u003e\\n \u003cb\u003e\\n \u003cColor\u003e\\n Veröffentliche{\\\" \\\"}\\n \u003cColor color=\\\"violet\\\"\u003eeigene Features\u003c/Color\u003e{\\\" \\\"}\\n im mStudio\\n \u003c/Color\u003e\\n \u003c/b\u003e\\n \u003c/Text\u003e\\n \u003c/Flex\u003e\\n \u003cLink target=\\\"_blank\\\" href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n Contributor Landingpage\\n \u003c/Link\u003e\\n \u003c/Flex\u003e\\n \u003c/AccentBox\u003e\\n\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"accent-box\"],\"filename\":\"03-components/structure/accent-box/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import {\\n Accordion,\\n Content,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import {\\n Accordion,\\n Content,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccordion\u003e\\n \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import {\\n Accordion,\\n Content,\\n Label,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccordion\u003e\\n \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"outline\":\"import {\\n Accordion,\\n Content,\\n Heading,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAccordion variant=\\\"outline\\\"\u003e\\n \u003cHeading\u003eAccordion Titel\u003c/Heading\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 });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Align\",\"description\":\"Die Align Komponente dient dazu Komponenten miteinander zu kombinieren\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Align,\\n Avatar,\\n Initials,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cAvatar\u003e\\n \u003cInitials\u003eMax Mustermann\u003c/Initials\u003e\\n \u003c/Avatar\u003e\\n \u003cText\u003e\\n \u003cb\u003eMax Mustermann\u003c/b\u003e\\n Organisationsinhaber\\n \u003c/Text\u003e\\n\u003c/Align\u003e;\\n\",\"icon-text\":\"import {\\n Align,\\n IconDomain,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cIconDomain /\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n\u003c/Align\u003e;\\n\",\"input-button\":\"import {\\n Align,\\n Button,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cTextField\u003e\\n \u003cLabel\u003eWeiterleitungsziel\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cButton\u003eHinzufügen\u003c/Button\u003e\\n\u003c/Align\u003e;\\n\",\"text-contextual-help\":\"import {\\n Align,\\n Button,\\n ContextualHelp,\\n ContextualHelpTrigger,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n\\n \u003cContextualHelpTrigger\u003e\\n \u003cButton /\u003e\\n\\n \u003cContextualHelp\u003e\\n \u003cText\u003e\\n Hier wird die URL des Servers angezeigt, der für den\\n E-Mail-Versand genutzt wird.\\n \u003c/Text\u003e\\n \u003c/ContextualHelp\u003e\\n \u003c/ContextualHelpTrigger\u003e\\n\u003c/Align\u003e;\\n\",\"text-copy-button\":\"import {\\n Align,\\n CopyButton,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cAlign\u003e\\n \u003cText\u003email.agenturserver.de\u003c/Text\u003e\\n \u003cCopyButton text=\\\"mail.agenturserver.de\\\" /\u003e\\n\u003c/Align\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"align\"],\"filename\":\"03-components/structure/align/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true,\\n example: \\\"main\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Das ColumnLayout organisiert Inhalte in Spalten. Sowohl die Anzahl der Spalten als auch deren Größe lassen sich flexibel für verschiedene Breakpoints definieren\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eStraße\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout rowGap=\\\"s\\\" columnGap=\\\"l\\\"\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eVorname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eNachname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eStraße\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"gaps\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout m={[1, 1]} rowGap=\\\"s\\\" columnGap=\\\"l\\\"\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eVorname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eNachname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cColumnLayout s={[2, 1]} columnGap=\\\"m\\\"\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eStraße\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003c/ColumnLayout\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eOrt\u003c/Label\u003e\\n \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import {\\n ColumnLayout,\\n Label,\\n TextField,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n \u003cTextField isRequired\u003e\\n \u003cLabel\u003eVorname\u003c/Label\u003e\\n \u003c/TextField\u003e\\n \u003cTextField isRequired\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 bgColor: \\\"dark\\\"\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Flex\",\"description\":\"Die Flex Komponente dient dazu Elemente innerhalb eines Flex-Containers anzuordnen\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n LayoutCard,\\n Flex,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFlex gap=\\\"m\\\" justify=\\\"center\\\"\u003e\\n \u003cLayoutCard /\u003e\\n \u003cLayoutCard /\u003e\\n \u003cLayoutCard /\u003e\\n\u003c/Flex\u003e;\\n\",\"layoutCard\":\"import {\\n Button,\\n Flex,\\n LayoutCard,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cLayoutCard style={{ minHeight: 300 }}\u003e\\n \u003cText\u003e\\n Labore, similique. Earum, quas in. At dolorem corrupti\\n blanditiis nulla deserunt laborum! Corrupti delectus\\n aspernatur nihil nulla obcaecati ipsam porro sequi rem?\\n Quam.\\n \u003c/Text\u003e\\n \u003cFlex align=\\\"end\\\" grow\u003e\\n \u003cButton color=\\\"accent\\\"\u003eInstall\u003c/Button\u003e\\n \u003c/Flex\u003e\\n\u003c/LayoutCard\u003e;\\n\",\"listItem\":\"import {\\n Avatar,\\n Content,\\n Flex,\\n Heading,\\n IconExtension,\\n Text,\\n typedList,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\nexport default () =\u003e {\\n const List = typedList\u003c{ text: string }\u003e();\\n\\n return (\\n \u003cList.List defaultViewMode=\\\"tiles\\\"\u003e\\n \u003cList.StaticData\\n data={[\\n { text: \\\"Meine Extension\\\" },\\n {\\n text: \\\"Meine andere Extension mit einen deutlich längeren Namen\\\",\\n },\\n ]}\\n /\u003e\\n \u003cList.Item\\n showTiles\\n showList={false}\\n textValue={(i) =\u003e i.text}\\n \u003e\\n {(i) =\u003e (\\n \u003cList.ItemView\u003e\\n \u003cAvatar\u003e\\n \u003cIconExtension /\u003e\\n \u003c/Avatar\u003e\\n \u003cHeading\u003e{i.text}\u003c/Heading\u003e\\n\\n \u003cContent\u003e\\n \u003cFlex justify=\\\"end\\\" align=\\\"end\\\" grow\u003e\\n \u003cText\u003eKostenlos\u003c/Text\u003e\\n \u003c/Flex\u003e\\n \u003c/Content\u003e\\n \u003c/List.ItemView\u003e\\n )}\\n \u003c/List.Item\u003e\\n \u003c/List.List\u003e\\n );\\n};\\n\"},\"slugs\":[\"03-components\",\"structure\",\"flex\"],\"filename\":\"03-components/structure/flex/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import { LayoutCard } from \\\"@mittwald/flow-react-components\\\";\\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 stellt mehrere ListItems übersichtlich in einer Liste dar. Sie bietet eine Sortierung, einen Filter und eine Suche.\"},\"scope\":{}},\"examples\":{\"accordion\":\"import {\\n AlertBadge,\\n Avatar,\\n Content,\\n Heading,\\n IconDomain,\\n IconSubdomain,\\n List,\\n ListItem,\\n ListItemView,\\n ListStaticData,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\nimport {\\n type Domain,\\n domains,\\n} from \\\"@/content/03-components/structure/list/examples/domainApi\\\";\\n\\n\u003cList batchSize={2} accordion\u003e\\n \u003cListStaticData data={domains} /\u003e\\n \u003cListItem\u003cDomain\u003e\u003e\\n {(domain) =\u003e (\\n \u003cListItemView\u003e\\n \u003cAvatar\\n color={domain.type === \\\"Domain\\\" ? \\\"blue\\\" : \\\"teal\\\"}\\n \u003e\\n {domain.type === \\\"Domain\\\" ? (\\n \u003cIconDomain /\u003e\\n ) : (\\n \u003cIconSubdomain /\u003e\\n )}\\n \u003c/Avatar\u003e\\n \u003cHeading\u003e\\n {domain.hostname}\\n {!domain.verified \u0026\u0026 (\\n \u003cAlertBadge status=\\\"warning\\\"\u003e\\n Unverifiziert\\n \u003c/AlertBadge\u003e\\n )}\\n \u003c/Heading\u003e\\n \u003cText\u003e{domain.type}\u003c/Text\u003e\\n \u003cContent slot=\\\"bottom\\\"\u003eMehr Inhalt\u003c/Content\u003e\\n \u003c/ListItemView\u003e\\n )}\\n \u003c/ListItem\u003e\\n\u003c/List\u003e;\\n\",\"actionGroup\":\"$33\",\"checkbox\":\"$34\",\"customSorting\":\"$35\",\"default\":\"$36\",\"filter\":\"$37\",\"filterCategory\":\"$38\",\"filterGeneralCategory\":\"$39\",\"main\":\"$3a\",\"mobile\":\"$3b\",\"namingDo\":\"$3c\",\"namingDont\":\"$3d\",\"pagination\":\"$3e\",\"search\":\"$3f\",\"sorting\":\"$40\",\"sortingDo\":\"$41\",\"sortingDont\":\"$42\",\"summary\":\"$43\",\"table\":\"$44\",\"tile\":\"$45\"},\"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\":\"Eine Section erhöht die Übersichtlichkeit, indem sie den Content in vertikale Teilbereiche mit festen Abständen trennt. Um die Teilbereiche optisch voneinander zu trennen, wird zwischen mehreren Sections automatisch ein Separator eingefügt.\"},\"scope\":{}},\"examples\":{\"alert-badge-dont\":\"$46\",\"alert-badge\":\"import {\\n AlertBadge,\\n Button,\\n ColumnLayout,\\n Content,\\n CopyButton,\\n Header,\\n Heading,\\n IconExternalLink,\\n Label,\\n LabeledValue,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003e\\n Mein Projekt\\n \u003cAlertBadge status=\\\"danger\\\"\u003eDeaktiviert\u003c/AlertBadge\u003e\\n \u003c/Heading\u003e\\n\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Datenbank migrieren\\n \u003c/Button\u003e\\n \u003cButton color=\\\"accent\\\"\u003eAktivieren\u003c/Button\u003e\\n \u003c/Header\u003e\\n\\n \u003cColumnLayout\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektname\u003c/Label\u003e\\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\\n \u003cContent\u003ep-lol3qe\u003c/Content\u003e\\n \u003cCopyButton text=\\\"p-lol3qe\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003cCopyButton text=\\\"p-lol3qe.project.space\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n \u003c/ColumnLayout\u003e\\n\u003c/Section\u003e;\\n\",\"context-menu\":\"$47\",\"default\":\"import {\\n Heading,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n \u003cText\u003e\\n Kommende Releases, neue Features und Tipps rund um dein\\n Hosting – wir bringen dir das Wichtigste in dein\\n Postfach. Abonniere unseren Newsletter und bleib auf dem\\n Laufenden.\\n \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"hierarchy-do\":\"import {\\n Heading,\\n IconStar,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeading\u003e\\n \u003cIconStar /\u003e\\n Erste Schritte\\n \u003c/Heading\u003e\\n \u003cText\u003e\\n Im Onboarding erklären wir dir alles Wichtige – etwa die\\n Organisationsstrukturen deines Hostings, das Rechte- und\\n Rollensystem oder auch den Zugang über SSH.\\n \u003c/Text\u003e\\n \u003cLink href=\\\"#\\\"\u003eStarten\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"link\":\"import {\\n Header,\\n Heading,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n \u003cLink href=\\\"#\\\"\u003eZur Anmeldung\u003c/Link\u003e\\n \u003c/Header\u003e\\n \u003cText\u003e\\n Kommende Releases, neue Features und Tipps rund um dein\\n Hosting – wir bringen dir das Wichtigste in dein\\n Postfach. Abonniere unseren Newsletter und bleib auf dem\\n Laufenden.\\n \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"long-heading\":\"import {\\n AlertBadge,\\n Button,\\n ColumnLayout,\\n Content,\\n CopyButton,\\n Header,\\n Heading,\\n IconExternalLink,\\n Label,\\n LabeledValue,\\n Link,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003e\\n Mein sehr langes Projekt\\n \u003cAlertBadge status=\\\"danger\\\"\u003eDeaktiviert\u003c/AlertBadge\u003e\\n \u003c/Heading\u003e\\n\\n \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n Datenbank migrieren\\n \u003c/Button\u003e\\n \u003cButton color=\\\"accent\\\"\u003eAktivieren\u003c/Button\u003e\\n \u003c/Header\u003e\\n\\n \u003cColumnLayout\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektname\u003c/Label\u003e\\n \u003cContent\u003eDolce Vita\u003c/Content\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eShort-ID\u003c/Label\u003e\\n \u003cContent\u003ep-lol3qe\u003c/Content\u003e\\n \u003cCopyButton text=\\\"p-lol3qe\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eProjektdomain\u003c/Label\u003e\\n \u003cLink\u003e\\n \u003cText\u003ep-lol3qe.project.space\u003c/Text\u003e\\n \u003cIconExternalLink /\u003e\\n \u003c/Link\u003e\\n \u003cCopyButton text=\\\"p-lol3qe.project.space\\\" /\u003e\\n \u003c/LabeledValue\u003e\\n \u003c/ColumnLayout\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"import {\\n Button,\\n Header,\\n Heading,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003c\u003e\\n \u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eDatenbanken\u003c/Heading\u003e\\n \u003cButton\u003eDatenbank verknüpfen\u003c/Button\u003e\\n \u003c/Header\u003e\\n \u003cText\u003e\\n Eine Datenbank, die mit einer App verknüpft ist, kann\\n nicht gelöscht werden. Die App nutzt immer die\\n verknüpfte Datenbank.\\n \u003c/Text\u003e\\n \u003c/Section\u003e\\n \u003cSection\u003e\\n \u003cHeading\u003eCronjobs\u003c/Heading\u003e\\n \u003cText\u003e\\n Ein Cronjob ist immer fest einer App zugeordnet, du\\n kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und\\n löschen.\\n \u003c/Text\u003e\\n \u003c/Section\u003e\\n\u003c/\u003e;\\n\",\"sub-heading\":\"import {\\n Heading,\\n InlineCode,\\n Label,\\n LabeledValue,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeading\u003eDNS Verwaltung\u003c/Heading\u003e\\n \u003cText\u003e\\n Da du externe Nameserver nutzt, empfehlen wir dir\\n folgende Records bei deinem Provider einzutragen.\\n \u003c/Text\u003e\\n \u003cHeading level={3}\u003eA-Record\u003c/Heading\u003e\\n \u003cLabeledValue\u003e\\n \u003cLabel\u003eIPv4-Adresse\u003c/Label\u003e\\n \u003cInlineCode\u003e12.123.123.12\u003c/InlineCode\u003e\\n \u003c/LabeledValue\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import {\\n Header,\\n Heading,\\n Section,\\n Switch,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cHeader\u003e\\n \u003cHeading\u003eAutoresponder\u003c/Heading\u003e\\n \u003cSwitch\u003eAktivieren\u003c/Switch\u003e\\n \u003c/Header\u003e\\n \u003cText\u003e\\n Lasse den Autoresponder für dich arbeiten. Er kann\\n automatisch auf eingehende E-Mails antworten.\\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\\\";\\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\":\"$48\",\"horizontally-centered\":\"import {\\n IconCheck,\\n IconClose,\\n Table,\\n TableBody,\\n TableCell,\\n TableColumn,\\n TableHeader,\\n TableRow,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTable aria-label=\\\"Scopes\\\"\u003e\\n \u003cTableHeader\u003e\\n \u003cTableColumn\u003eBereich\u003c/TableColumn\u003e\\n \u003cTableColumn horizontalAlign=\\\"center\\\"\u003e\\n Lesen\\n \u003c/TableColumn\u003e\\n \u003cTableColumn horizontalAlign=\\\"center\\\"\u003e\\n Schreiben\\n \u003c/TableColumn\u003e\\n \u003c/TableHeader\u003e\\n \u003cTableBody\u003e\\n \u003cTableRow\u003e\\n \u003cTableCell\u003eProjekt\u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"center\\\"\u003e\\n \u003cIconCheck status=\\\"success\\\" aria-label=\\\"Zugriff\\\" /\u003e\\n \u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"center\\\"\u003e\\n \u003cIconClose\\n status=\\\"danger\\\"\\n aria-label=\\\"Kein Zugriff\\\"\\n /\u003e\\n \u003c/TableCell\u003e\\n \u003c/TableRow\u003e\\n \u003c/TableBody\u003e\\n\u003c/Table\u003e;\\n\",\"vertically-centered\":\"import {\\n InlineCode,\\n Table,\\n TableBody,\\n TableCell,\\n TableColumn,\\n TableHeader,\\n TableRow,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTable aria-label=\\\"Button Props\\\" verticalAlign=\\\"middle\\\"\u003e\\n \u003cTableHeader\u003e\\n \u003cTableColumn\u003eName\u003c/TableColumn\u003e\\n \u003cTableColumn\u003eType\u003c/TableColumn\u003e\\n \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\\n \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\\n \u003c/TableHeader\u003e\\n \u003cTableBody\u003e\\n \u003cTableRow\u003e\\n \u003cTableCell\u003e\\n \u003cInlineCode\u003esize\u003c/InlineCode\u003e\\n \u003c/TableCell\u003e\\n \u003cTableCell\u003em | s\u003c/TableCell\u003e\\n \u003cTableCell\u003em\u003c/TableCell\u003e\\n \u003cTableCell\u003e\\n Lorem ipsum dolor sit amet consectetur adipisicing\\n elit. Cumque eius quam quas vel voluptas, ullam\\n aliquid fugit.\\n \u003c/TableCell\u003e\\n \u003c/TableRow\u003e\\n \u003c/TableBody\u003e\\n\u003c/Table\u003e;\\n\",\"withFooter\":\"import {\\n Table,\\n TableBody,\\n TableCell,\\n TableColumn,\\n TableFooterRow,\\n TableHeader,\\n TableRow,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cTable aria-label=\\\"Bestellübersicht\\\"\u003e\\n \u003cTableHeader\u003e\\n \u003cTableColumn\u003eArtikel\u003c/TableColumn\u003e\\n \u003cTableColumn horizontalAlign=\\\"end\\\"\u003ePreis\u003c/TableColumn\u003e\\n \u003c/TableHeader\u003e\\n \u003cTableBody\u003e\\n \u003cTableRow\u003e\\n \u003cTableCell\u003eproSpace (2 vCPU / 4 GB RAM)\u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"end\\\"\u003e32,00 €\u003c/TableCell\u003e\\n \u003c/TableRow\u003e\\n \u003cTableRow\u003e\\n \u003cTableCell\u003e20 GB Speicherplatz\u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"end\\\"\u003eInklusive\u003c/TableCell\u003e\\n \u003c/TableRow\u003e\\n \u003cTableRow\u003e\\n \u003cTableCell\u003e20 GB Zusatzspeicherplatz\u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"end\\\"\u003e2,00 €\u003c/TableCell\u003e\\n \u003c/TableRow\u003e\\n \u003cTableFooterRow\u003e\\n \u003cTableCell\u003eGesamtpreis\u003c/TableCell\u003e\\n \u003cTableCell horizontalAlign=\\\"end\\\"\u003e34,00 €\u003c/TableCell\u003e\\n \u003c/TableFooterRow\u003e\\n \u003c/TableBody\u003e\\n\u003c/Table\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n const {LiveCodeEditor} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n return _jsx(LiveCodeEditor, {\\n editorDisabled: true,\\n zoom: 0.6\\n });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"FileCardList\",\"description\":\"Die FileCardList Komponente ordnet FileCards in einem ColumnLayout an\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n FileCard,\\n FileCardList,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileCardList aria-label=\\\"Hochgeladene Dateien\\\"\u003e\\n \u003cFileCard\\n name=\\\"file1.txt\\\"\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n /\u003e\\n \u003cFileCard\\n name=\\\"file2.txt\\\"\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n /\u003e\\n \u003cFileCard\\n name=\\\"file3.txt\\\"\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n /\u003e\\n \u003cFileCard\\n name=\\\"file4.txt\\\"\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n /\u003e\\n \u003cFileCard\\n type=\\\"image/jpg\\\"\\n name=\\\"image.jpg\\\"\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n /\u003e\\n\u003c/FileCardList\u003e;\\n\"},\"slugs\":[\"03-components\",\"upload\",\"file-card-list\"],\"filename\":\"03-components/upload/file-card-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\":\"FileCard\",\"description\":\"Mit FileCard Komponente können Informationen zu einer Datei angezeigt werden\"},\"scope\":{}},\"examples\":{\"default\":\"import { FileCard } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileCard\\n type=\\\"image/jpg\\\"\\n name=\\\"image.jpg\\\"\\n sizeInBytes={47500}\\n/\u003e;\\n\",\"delete\":\"import { FileCard } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileCard\\n type=\\\"image/jpg\\\"\\n name=\\\"image.jpg\\\"\\n sizeInBytes={47500}\\n onDelete={() =\u003e {\\n console.log(\\\"delete\\\");\\n }}\\n/\u003e;\\n\",\"image\":\"import { FileCard } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileCard\\n type=\\\"image/jpg\\\"\\n name=\\\"image.jpg\\\"\\n sizeInBytes={47500}\\n imageSrc=\\\"https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg\\\"\\n/\u003e;\\n\",\"link\":\"import { FileCard } from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cFileCard\\n type=\\\"image/jpg\\\"\\n name=\\\"image.jpg\\\"\\n sizeInBytes={47500}\\n href=\\\"#\\\"\\n/\u003e;\\n\"},\"slugs\":[\"03-components\",\"upload\",\"file-card\"],\"filename\":\"03-components/upload/file-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 });\\n}\\nfunction MDXContent(props = {}) {\\n const {wrapper: MDXLayout} = {\\n ..._provideComponents(),\\n ...props.components\\n };\\n return MDXLayout ? _jsx(MDXLayout, {\\n ...props,\\n children: _jsx(_createMdxContent, {\\n ...props\\n })\\n }) : _createMdxContent(props);\\n}\\nreturn {\\n default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"FileDropZone\",\"description\":\"Mit der FileDropZone können Dateien per drag \u0026 drop ausgewählt werden\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n Button,\\n FileDropZone,\\n FileField,\\n Heading,\\n IconUpload,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cFileDropZone onChange={(files) =\u003e console.log(files)}\u003e\\n \u003cIconUpload /\u003e\\n \u003cHeading\u003eDatei ablegen\u003c/Heading\u003e\\n \u003cFileField\\n name=\\\"file\\\"\\n onChange={(files) =\u003e console.log(files)}\\n \u003e\\n \u003cButton\u003eDatei auswählen\u003c/Button\u003e\\n \u003c/FileField\u003e\\n \u003c/FileDropZone\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"import {\\n Button,\\n FileDropZone,\\n FileField,\\n Heading,\\n IconUpload,\\n Section,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cFileDropZone\\n multiple\\n onChange={(files) =\u003e console.log(files)}\\n \u003e\\n \u003cIconUpload /\u003e\\n \u003cHeading\u003eDateien ablegen\u003c/Heading\u003e\\n \u003cFileField\\n name=\\\"file\\\"\\n onChange={(files) =\u003e console.log(files)}\\n \u003e\\n \u003cButton\u003eDateien auswählen\u003c/Button\u003e\\n \u003c/FileField\u003e\\n \u003c/FileDropZone\u003e\\n\u003c/Section\u003e;\\n\",\"type\":\"import {\\n Button,\\n FileDropZone,\\n FileField,\\n Heading,\\n IconImage,\\n Section,\\n Text,\\n} from \\\"@mittwald/flow-react-components\\\";\\n\\n\u003cSection\u003e\\n \u003cFileDropZone\\n accept=\\\"image/png\\\"\\n onChange={(files) =\u003e console.log(files)}\\n \u003e\\n \u003cIconImage /\u003e\\n \u003cHeading\u003eBild ablegen\u003c/Heading\u003e\\n \u003cText\u003e\\n Es sind nur Bilder vom Typ image/png erlaubt.\\n \u003c/Text\u003e\\n \u003cFileField\\n name=\\\"file\\\"\\n onChange={(files) =\u003e console.log(files)}\\n \u003e\\n \u003cButton\u003eBild auswählen\u003c/Button\u003e\\n \u003c/FileField\u003e\\n \u003c/FileDropZone\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"03-components\",\"upload\",\"file-drop-zone\"],\"filename\":\"03-components/upload/file-drop-zone/index.mdx\"}]}],[\"$\",\"$L49\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L4a\",null,{\"children\":[\"$\",\"$L4b\",null,{\"children\":[[\"$\",\"$L4c\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L4d\",null,{}]}],[\"$\",\"$L4e\",null,{\"offCanvas\":true,\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L6\",null,{\"children\":\"Menü\"}],[\"$\",\"$L4a\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L16\",null,{\"docs\":[{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:slugs\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:slugs\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:slugs\",\"filename\":\"02-foundations/01-design/01-design-tokens/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:slugs\",\"filename\":\"02-foundations/01-design/02-colors/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:slugs\",\"filename\":\"02-foundations/01-design/05-typography/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:slugs\",\"filename\":\"02-foundations/02-structure/01-layout/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:slugs\",\"filename\":\"02-foundations/02-structure/02-spacing/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:slugs\",\"filename\":\"02-foundations/03-content-guidelines/01-sprach-guide/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:slugs\",\"filename\":\"02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:slugs\",\"filename\":\"02-foundations/04-ui-patterns/01-dashboard/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:slugs\",\"filename\":\"02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:slugs\",\"filename\":\"02-foundations/04-ui-patterns/03-struktur/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:slugs\",\"filename\":\"02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:slugs\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:slugs\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:slugs\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:slugs\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:slugs\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:slugs\",\"filename\":\"03-components/chat/chat/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:slugs\",\"filename\":\"03-components/chat/message-separator/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:slugs\",\"filename\":\"03-components/chat/message-thread/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:slugs\",\"filename\":\"03-components/chat/message/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:slugs\",\"filename\":\"03-components/content/avatar-stack/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:slugs\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:slugs\",\"filename\":\"03-components/content/code-block/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:slugs\",\"filename\":\"03-components/content/color/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:slugs\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:slugs\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:slugs\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:slugs\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:slugs\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:slugs\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:slugs\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:slugs\",\"filename\":\"03-components/content/markdown/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:slugs\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:slugs\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:slugs\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:slugs\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:slugs\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:slugs\",\"filename\":\"03-components/form-controls/combo-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:slugs\",\"filename\":\"03-components/form-controls/date-picker/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:slugs\",\"filename\":\"03-components/form-controls/date-range-picker/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:slugs\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:slugs\",\"filename\":\"03-components/form-controls/file-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:slugs\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:slugs\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:slugs\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:slugs\",\"filename\":\"03-components/form-controls/search-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:slugs\",\"filename\":\"03-components/form-controls/segmented-control/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:slugs\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:slugs\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:slugs\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:slugs\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:slugs\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:slugs\",\"filename\":\"03-components/form-controls/time-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:slugs\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:slugs\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:slugs\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:slugs\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:slugs\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:slugs\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:slugs\",\"filename\":\"03-components/overlays/light-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:slugs\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:slugs\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:slugs\",\"filename\":\"03-components/status/alert-badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:slugs\",\"filename\":\"03-components/status/alert-icon/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:slugs\",\"filename\":\"03-components/status/alert/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:slugs\",\"filename\":\"03-components/status/badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:slugs\",\"filename\":\"03-components/status/counter-badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:slugs\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:slugs\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:slugs\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:slugs\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:slugs\",\"filename\":\"03-components/structure/accent-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:slugs\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:slugs\",\"filename\":\"03-components/structure/align/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:slugs\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:slugs\",\"filename\":\"03-components/structure/flex/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:slugs\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:slugs\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:slugs\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:slugs\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:slugs\",\"filename\":\"03-components/structure/table/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:slugs\",\"filename\":\"03-components/upload/file-card-list/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:slugs\",\"filename\":\"03-components/upload/file-card/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:slugs\",\"filename\":\"03-components/upload/file-drop-zone/index.mdx\"}]}],[\"$\",\"$L4f\",null,{\"docs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:2:props:children:props:children:props:children:1:props:children:1:props:children:props:children:0:props:docs\",\"mobileNavigation\":true}]]}]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L4f\",null,{\"docs\":[{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:0:slugs\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:1:slugs\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:2:slugs\",\"filename\":\"02-foundations/01-design/01-design-tokens/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:3:slugs\",\"filename\":\"02-foundations/01-design/02-colors/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:4:slugs\",\"filename\":\"02-foundations/01-design/05-typography/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:5:slugs\",\"filename\":\"02-foundations/02-structure/01-layout/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:6:slugs\",\"filename\":\"02-foundations/02-structure/02-spacing/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:7:slugs\",\"filename\":\"02-foundations/03-content-guidelines/01-sprach-guide/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:8:slugs\",\"filename\":\"02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:9:slugs\",\"filename\":\"02-foundations/04-ui-patterns/01-dashboard/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:10:slugs\",\"filename\":\"02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:11:slugs\",\"filename\":\"02-foundations/04-ui-patterns/03-struktur/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:12:slugs\",\"filename\":\"02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:13:slugs\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:14:slugs\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:15:slugs\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:16:slugs\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:17:slugs\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:18:slugs\",\"filename\":\"03-components/chat/chat/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:19:slugs\",\"filename\":\"03-components/chat/message-separator/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:20:slugs\",\"filename\":\"03-components/chat/message-thread/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:21:slugs\",\"filename\":\"03-components/chat/message/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:22:slugs\",\"filename\":\"03-components/content/avatar-stack/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:23:slugs\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:24:slugs\",\"filename\":\"03-components/content/code-block/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:25:slugs\",\"filename\":\"03-components/content/color/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:26:slugs\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:27:slugs\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:28:slugs\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:29:slugs\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:30:slugs\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:31:slugs\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:32:slugs\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:33:slugs\",\"filename\":\"03-components/content/markdown/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:34:slugs\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:35:slugs\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:36:slugs\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:37:slugs\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:38:slugs\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:39:slugs\",\"filename\":\"03-components/form-controls/combo-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:40:slugs\",\"filename\":\"03-components/form-controls/date-picker/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:41:slugs\",\"filename\":\"03-components/form-controls/date-range-picker/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:42:slugs\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:43:slugs\",\"filename\":\"03-components/form-controls/file-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:44:slugs\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:45:slugs\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:46:slugs\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:47:slugs\",\"filename\":\"03-components/form-controls/search-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:48:slugs\",\"filename\":\"03-components/form-controls/segmented-control/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:49:slugs\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:50:slugs\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:51:slugs\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:52:slugs\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:53:slugs\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:54:slugs\",\"filename\":\"03-components/form-controls/time-field/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:55:slugs\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:56:slugs\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:57:slugs\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:58:slugs\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:59:slugs\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:60:slugs\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:61:slugs\",\"filename\":\"03-components/overlays/light-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:62:slugs\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:63:slugs\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:64:slugs\",\"filename\":\"03-components/status/alert-badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:65:slugs\",\"filename\":\"03-components/status/alert-icon/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:66:slugs\",\"filename\":\"03-components/status/alert/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:67:slugs\",\"filename\":\"03-components/status/badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:68:slugs\",\"filename\":\"03-components/status/counter-badge/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:69:slugs\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:70:slugs\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:71:slugs\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:72:slugs\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:73:slugs\",\"filename\":\"03-components/structure/accent-box/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:74:slugs\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:75:slugs\",\"filename\":\"03-components/structure/align/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:76:slugs\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:77:slugs\",\"filename\":\"03-components/structure/flex/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:78:slugs\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:79:slugs\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:80:slugs\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:81:slugs\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:82:slugs\",\"filename\":\"03-components/structure/table/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:83:slugs\",\"filename\":\"03-components/upload/file-card-list/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:84:slugs\",\"filename\":\"03-components/upload/file-card/index.mdx\"},{\"mdxSource\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:mdxSource\",\"examples\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:examples\",\"slugs\":\"$2:props:children:props:children:props:children:props:children:0:props:children:1:props:docs:85:slugs\",\"filename\":\"03-components/upload/file-drop-zone/index.mdx\"}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L50\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L51\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"$undefined\",[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}],[\"$\",\"$L52\",null,{}]]}]}]}]}]\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nd:null\n"])</script><script>self.__next_f.push([1,"e:null\n12:[[\"$\",\"title\",\"0\",{\"children\":\"Flow – mittwald Design System\"}],[\"$\",\"link\",\"1\",{\"rel\":\"icon\",\"href\":\"/flow/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n"])</script></body></html>