81:T53b,import { ActionGroup, Avatar, Button, Content, Heading, IconDomain, typedList, IconEdit, IconDelete, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const List = typedList(); return ( domain.id} > domain.domain}> {(domain) => ( {domain.hostname} )} ); }; 82:Ta61,import { Avatar, Checkbox, Heading, IconDomain, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; import { useState } from "react"; export default () => { const List = typedList(); const [selectedDomains, setSelectedDomains] = useState< Domain[] >([]); const onSelected = ( domain: Domain, selected: boolean, ) => { if (selected) { setSelectedDomains((prev) => [...prev, domain]); } else { setSelectedDomains((prev) => prev.filter((d) => d.id !== domain.id), ); } }; const isSelected = (domain: Domain) => { return ( selectedDomains.find((d) => d.id === domain.id) !== undefined ); }; return ( { onSelected(domain, !isSelected(domain)); }} getItemId={(domain) => domain.id} > domain.hostname} > {(domain) => ( onSelected(domain, value) } aria-label={`${domain.hostname} auswählen`} /> {domain.hostname} {domain.type} )} setSelectedDomains(v ? domains : []) } /> Domain {(domain) => ( onSelected(domain, value) } aria-label={`${domain.hostname} auswählen`} /> )} {(domain) => domain.hostname} ); }; 83:T4d5,import { Avatar, Content, ContextMenu, Heading, IconEmail, Label, MenuItem, ProgressBar, typedList, } from "@mittwald/flow-react-components"; export default () => { const List = typedList<{ mail: string }>(); return (

mail.mail}> {(mail) => ( {mail.mail} Speicherplatz Details anzeigen )}

); }; 84:T430,import { Avatar, Content, ContextMenu, Heading, IconEmail, Label, MenuItem, ProgressBar, typedList, } from "@mittwald/flow-react-components"; export default () => { const List = typedList<{ mail: string }>(); return ( mail.mail}> {(mail) => ( {mail.mail} Speicherplatz Details anzeigen )} ); }; 85:T414,import { Avatar, Content, ContextMenu, Heading, IconDomain, MenuItem, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const List = typedList(); return ( domain.id} > domain.domain} > {(domain) => ( {domain.hostname} Top Content Bottom Content Details anzeigen )} ); }; 86:T571,import { Avatar, Heading, IconDomain, Skeleton, SkeletonText, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const List = typedList(); return ( {/* The loader waits a moment before resolving, so the loading view is briefly visible before the data appears. */} {() => new Promise<{ data: Domain[] }>((resolve) => { setTimeout( () => resolve({ data: domains.slice(0, 3) }), 2000, ); }) } domain.hostname} loadingView={ } > {(domain) => ( {domain.hostname} {domain.type} )} ); }; 87:Td16,import { ActionGroup, AlertBadge, Avatar, Button, ContextMenu, Heading, IconDomain, IconDownload, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > Name Type TLD Hostname {(domain) => domain.domain} {(domain) => domain.type} {(domain) => domain.tld} {(domain) => domain.hostname} domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 88:T5d0,import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 89:T600,import { typedList } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > Name Type TLD Hostname {(domain) => domain.domain} {(domain) => domain.type} {(domain) => domain.tld} {(domain) => domain.hostname} ); }; 8a:T618,import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > domain.domain} showTiles showList={false} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 8b:T7d2,import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > filterValue === "Verifiziert" ? propertyValue : !propertyValue } defaultSelected={["Unverifiziert"]} values={["Verifiziert", "Unverifiziert"]} /> domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 8c:T8f0,import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} > filterValue === "Type Domain" ? propertyValue === "Domain" : propertyValue === "Subdomain" } values={["Type Domain", "Type Subdomain"]} defaultSelected={["Type Domain"]} /> filterValue === "Verifizierung Verifiziert" ? propertyValue : !propertyValue } defaultSelected={["Verifizierung Unverifiziert"]} values={[ "Verifizierung Verifiziert", "Verifizierung Unverifiziert", ]} /> domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 8d:T714,import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; export default () => { const DomainList = typedList(); return ( domain.id} hidePagination > domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 8e:T637,import { AlertBadge, Avatar, ContextMenu, Heading, IconDomain, IconSubdomain, MenuItem, Text, typedList, } from "@mittwald/flow-react-components"; import { type Domain, domains, } from "@/content/04-components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); return ( domain.id} hidePagination > domain.domain} > {(domain) => ( {domain.type === "Domain" ? ( ) : ( )} {domain.hostname} {!domain.verified && ( Unverifiziert )} {domain.type} Details anzeigen Löschen )} ); }; 8f:T449,import { Flex, Heading, ListItemView, ListSummary, Text, typedList, } from "@mittwald/flow-react-components"; export default () => { const InvoiceList = typedList<{ id: string; amount: string; }>(); return ( invoice.id} > Gesamt: 37,00 € invoice.id}> {(invoice) => ( {invoice.id} {invoice.amount} )} ); }; 90:T486,import { AlertBadge, Button, ColumnLayout, Content, CopyButton, Header, Heading, IconContextMenu, IconExternalLink, Label, LabeledValue, Link, Section, Text, } from "@mittwald/flow-react-components";

Mein Projekt Fehlende Vertragspartnerdaten

Projektname Dolce Vita Short-ID p-lol3qe Projektdomain p-lol3qe.project.space

; 91:T504,import { Button, ColumnLayout, Content, ContextMenu, ContextMenuTrigger, CopyButton, Header, Heading, IconContextMenu, IconExternalLink, Label, LabeledValue, Link, MenuItem, Section, Text, } from "@mittwald/flow-react-components";

Mein Projekt Datenbank migrieren Volume migrieren

Projektname Dolce Vita Short-ID p-lol3qe Projektdomain p-lol3qe.project.space

; 92:T484,import { InlineCode, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "@mittwald/flow-react-components"; Name Type Default Description color primary | accent | secondary | danger primary The color of the button variant plain | solid | soft solid The variant of the button size m | s m The size of the button

; 93:T40d,import { Button, FileCard, FileCardList, FileDropZone, FileField, Heading, IconUpload, Section, } from "@mittwald/flow-react-components"; import { useState } from "react"; export default () => { const [files, setFiles] = useState([]); return (

{ if (value) { setFiles([...files, ...value]); } }} > Dateien ablegen {files.map((file) => ( setFiles( files.filter((watched) => watched !== file), ) } /> ))}

); }; 94:T844,import { Button, Heading, FileField, ImageCropper, IconImage, Section, FileDropZone, Text, Flex, IconClose, Action, } from "@mittwald/flow-react-components"; import { useForm } from "react-hook-form"; import { Form, SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; import { sleep } from "@/content/04-components/actions/action/examples/lib"; export default () => { const form = useForm<{ files: FileList | File[] | []; }>({ defaultValues: { files: [] } }); const Field = typedField(form); const watchedFiles = [...form.watch("files")]; return (

); }; 1b:["$","$L1c",null,{"attribute":"data-theme","defaultTheme":"system","enableSystem":true,"initialTheme":"$undefined","disableTransitionOnChange":true,"noScript":true,"children":["$","$L1d",null,{"children":[["$","$L1e",null,{}],["$","$L1f",null,{"children":["$","div",null,{"className":"layout-module-scss-module__9bQamG__wrapper","children":[["$","$L20",null,{"docs":[{"mdxSource":{"compiledSource":"$21","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx","anchors":[{"slug":"installation-der-flow-react-component-library","text":"Installation der Flow React Component Library","level":2},{"slug":"styles-importieren","text":"Styles importieren","level":2},{"slug":"defaults-fur-components-festlegen","text":"Defaults für Components festlegen","level":2}]},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-get-started","stylesheet"],"filename":"01-get-started/stylesheet/index.mdx","anchors":[{"slug":"installation-des-standalone-stylesheets","text":"Installation des Standalone Stylesheets","level":2},{"slug":"styles-importieren","text":"Styles importieren","level":2},{"slug":"layered-variante-optional","text":"Layered-Variante (optional)","level":2},{"slug":"layered-variante-optional-warum-die-gelayerte-variante","text":"Warum die gelayerte Variante?","level":3},{"slug":"layered-variante-optional-welche-variante-wann","text":"Welche Variante wann?","level":3},{"slug":"anwendung-des-stylesheets","text":"Anwendung des Stylesheets","level":2},{"slug":"anwendung-des-stylesheets-generelle-klassennamen-auszeichnungen","text":"Generelle Klassennamen-Auszeichnungen","level":3},{"slug":"anwendung-des-stylesheets-ein-hinweis-zur-spezialisierung","text":"Ein Hinweis zur Spezialisierung","level":3}]},{"mdxSource":{"compiledSource":"$23","frontmatter":{"title":"Versionierung & Stabilität","navTitle":"Versionierung","description":"Ab Version 1.0.0 folgt Flow Semantic Versioning. Diese Seite beschreibt, worauf du dich als Entwickler verlassen kannst, worauf nicht und wie du dich gegen ungewollte Änderungen absicherst."},"scope":{}},"examples":{},"slugs":["01-get-started","versioning"],"filename":"01-get-started/versioning/index.mdx","anchors":[{"slug":"semantic-versioning","text":"Semantic Versioning","level":2},{"slug":"worauf-du-dich-verlassen-kannst","text":"Worauf du dich verlassen kannst","level":2},{"slug":"node-und-react-unterstutzung","text":"Node- und React-Unterstützung","level":2},{"slug":"was-nicht-garantiert-ist","text":"Was nicht garantiert ist","level":2},{"slug":"so-schutzt-du-dich","text":"So schützt du dich","level":2},{"slug":"so-schutzt-du-dich-style-nicht-gegen-interne-css-klassen","text":"Style nicht gegen interne CSS-Klassen","level":3},{"slug":"so-schutzt-du-dich-behandle-typescript-typen-als-best-effort","text":"Behandle TypeScript-Typen als best-effort","level":3},{"slug":"component-lifecycle","text":"Component Lifecycle","level":2}]},{"mdxSource":{"compiledSource":"$24","frontmatter":{"title":"Design Tokens"},"scope":{}},"examples":{"schema":"import {\n Badge,\n ColumnLayout,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Context\n Einordnung
\n z. B. Farbe, Component\n \n \n Common Unit\n Kategorie
\n z. B. Variante, Sizing, Styling\n \n \n Clarification\n Spezifizierung
\n z. B. Farbwert, State\n \n;\n"},"slugs":["02-foundations","01-design","01-design-tokens"],"filename":"02-foundations/01-design/01-design-tokens/index.mdx","anchors":[{"slug":"was-sind-design-tokens","text":"Was sind Design Tokens?","level":2},{"slug":"vorteile","text":"Vorteile","level":2},{"slug":"benennung-von-tokens","text":"Benennung von Tokens","level":2},{"slug":"benennung-von-tokens-schema","text":"Schema","level":3},{"slug":"benennung-von-tokens-beispiele","text":"Beispiele","level":3},{"slug":"token-arten-und-struktur","text":"Token-Arten und Struktur","level":2},{"slug":"token-arten-und-struktur-global-token","text":"Global Token","level":3},{"slug":"token-arten-und-struktur-alias-token","text":"Alias Token","level":3},{"slug":"token-arten-und-struktur-alias-token-2","text":"Alias Token 2","level":3},{"slug":"token-arten-und-struktur-component-specific-token","text":"Component Specific Token","level":3}]},{"mdxSource":{"compiledSource":"$25","frontmatter":{"title":"Color"},"scope":{}},"examples":{},"slugs":["02-foundations","01-design","02-colors"],"filename":"02-foundations/01-design/02-colors/index.mdx","anchors":[{"slug":"base-color","text":"Base Color","level":2},{"slug":"base-color-neutral-color","text":"Neutral Color","level":3},{"slug":"base-color-hosting-blue","text":"Hosting Blue","level":3},{"slug":"functional-color","text":"Functional Color","level":2},{"slug":"functional-color-espelkamp-green","text":"Espelkamp Green","level":3},{"slug":"functional-color-royal-orange","text":"Royal Orange","level":3},{"slug":"functional-color-amaranth-red","text":"Amaranth Red","level":3},{"slug":"decorative-color","text":"Decorative Color","level":2},{"slug":"decorative-color-soft-contrast-violet","text":"Soft Contrast Violet","level":3},{"slug":"decorative-color-super-teal","text":"Super Teal","level":3},{"slug":"decorative-color-bright-lilac","text":"Bright Lilac","level":3},{"slug":"decorative-color-mittwald-navy","text":"mittwald Navy","level":3},{"slug":"light-und-dark-color","text":"Light und Dark Color","level":2},{"slug":"light-und-dark-color-light","text":"Light","level":3},{"slug":"light-und-dark-color-dark","text":"Dark","level":3},{"slug":"categorical-color","text":"Categorical Color","level":2}]},{"mdxSource":{"compiledSource":"$26","frontmatter":{"title":"Themes"},"scope":{}},"examples":{"alpha-dark":"import {\n AccentBox,\n Heading,\n LayoutCard,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n

\n Nicht Static\n Die Farben passen sich an das Theme an.\n

\n \n \n \n \n

\n Static\n \n Die Farben bleiben in Dark und Light Theme gleich.\n \n

\n \n \n;\n","alpha-light":"import {\n AccentBox,\n Heading,\n LayoutCard,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n

\n Nicht Static\n Die Farben passen sich an das Theme an.\n

\n \n \n \n \n

\n Static\n \n Die Farben bleiben in Dark und Light Theme gleich.\n \n

\n \n \n;\n"},"slugs":["02-foundations","01-design","03-themes"],"filename":"02-foundations/01-design/03-themes/index.mdx","anchors":[{"slug":"umgang-mit-themes","text":"Umgang mit Themes","level":2},{"slug":"individuelle-inhalte","text":"Individuelle Inhalte","level":2},{"slug":"technische-implementierung","text":"Technische Implementierung","level":2},{"slug":"technische-implementierung-teispacenext-themes","text":"@teispace/next-themes","level":3}]},{"mdxSource":{"compiledSource":"$27","frontmatter":{"title":"Accessibility"},"scope":{}},"examples":{},"slugs":["02-foundations","01-design","04-accessibility"],"filename":"02-foundations/01-design/04-accessibility/index.mdx","anchors":[{"slug":"was-flow-fur-dich-ubernimmt","text":"Was Flow für dich übernimmt","level":2},{"slug":"was-du-selbst-beachten-solltest","text":"Was du selbst beachten solltest","level":2},{"slug":"mehr-erfahren","text":"Mehr erfahren","level":2}]},{"mdxSource":{"compiledSource":"$28","frontmatter":{"title":"Typography"},"scope":{}},"examples":{},"slugs":["02-foundations","01-design","05-typography"],"filename":"02-foundations/01-design/05-typography/index.mdx","anchors":[{"slug":"schriftgrossen-und-hierarchie","text":"Schriftgrößen und Hierarchie","level":2},{"slug":"schriftgrossen-und-hierarchie-headings","text":"Headings","level":3},{"slug":"schriftgrossen-und-hierarchie-body","text":"Body","level":3}]},{"mdxSource":{"compiledSource":"$29","frontmatter":{"title":"Layout"},"scope":{}},"examples":{"general-layout":"$2a","mStudio-layout":"$2b"},"slugs":["02-foundations","02-structure","01-layout"],"filename":"02-foundations/02-structure/01-layout/index.mdx","anchors":[{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"genereller-aufbau","text":"Genereller Aufbau","level":2},{"slug":"genereller-aufbau-header","text":"Header","level":3},{"slug":"genereller-aufbau-side-navigation","text":"Side-Navigation","level":3},{"slug":"genereller-aufbau-content","text":"Content","level":3},{"slug":"genereller-aufbau-overlay","text":"Overlay","level":3}]},{"mdxSource":{"compiledSource":"$2c","frontmatter":{"title":"Spacing"},"scope":{}},"examples":{"falseSpacing":"import {\n Avatar,\n Content,\n Initials,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Sven Fuchs\n \n \n \n Sven Fuchs\n \n \n Projektentwickler\n \n;\n","rightSpacing":"import {\n Avatar,\n Content,\n Initials,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Sven Fuchs\n \n \n \n Sven Fuchs\n \n \n Projektentwickler\n \n;\n"},"slugs":["02-foundations","02-structure","02-spacing"],"filename":"02-foundations/02-structure/02-spacing/index.mdx","anchors":[{"slug":"grundlagen","text":"Grundlagen","level":2},{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"spacing-tabelle","text":"Spacing-Tabelle","level":2}]},{"mdxSource":{"compiledSource":"$2d","frontmatter":{"title":"Components"},"scope":{}},"examples":{},"slugs":["02-foundations","02-structure","03-components"],"filename":"02-foundations/02-structure/03-components/index.mdx","anchors":[{"slug":"logik","text":"Logik","level":2},{"slug":"lesbarkeit","text":"Lesbarkeit","level":2},{"slug":"wiederverwendbarkeit","text":"Wiederverwendbarkeit","level":2},{"slug":"suspense-errorboundaries","text":"Suspense- / ErrorBoundaries","level":2},{"slug":"aufgeblahtes-props-interface","text":"Aufgeblähtes Props-Interface","level":2},{"slug":"children-in-unterkomponenten","text":"Children in Unterkomponenten","level":2},{"slug":"baue-deine-eigenen-components","text":"Baue deine eigenen Components","level":2}]},{"mdxSource":{"compiledSource":"$2e","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","anchors":[{"slug":"wie-wir-sprechen","text":"Wie wir sprechen","level":2},{"slug":"wie-wir-sprechen-technisch-aber-einfach-verstandlich","text":"Technisch aber einfach verständlich","level":3},{"slug":"wie-wir-sprechen-auf-augenhohe","text":"Auf Augenhöhe","level":3},{"slug":"wie-wir-sprechen-aktiv","text":"Aktiv","level":3},{"slug":"wie-wir-sprechen-konsistent","text":"Konsistent","level":3},{"slug":"leitlinien","text":"Leitlinien","level":2},{"slug":"leitlinien-aktive-sprache","text":"Aktive Sprache","level":3},{"slug":"leitlinien-sie-du-oder-ihr","text":"Sie, Du oder Ihr","level":3},{"slug":"leitlinien-bindestrich-worter-koppeln","text":"Bindestrich: Wörter koppeln","level":3},{"slug":"leitlinien-englischsprachige-inhalte","text":"Englischsprachige Inhalte","level":3},{"slug":"leitlinien-gendern","text":"Gendern","level":3},{"slug":"leitlinien-kein-grund-zu-schreien","text":"KEIN! GRUND! ZU! SCHREIEN!!!","level":3},{"slug":"leitlinien-klare-gliederung","text":"Klare Gliederung","level":3},{"slug":"leitlinien-kurze-satze","text":"Kurze Sätze","level":3},{"slug":"leitlinien-mittwald-mstudio-und-vserver-werden-immer-kleingeschrieben","text":"mittwald, mStudio und vServer werden IMMER kleingeschrieben","level":3},{"slug":"leitlinien-wichtige-aspekte-hervorheben","text":"Wichtige Aspekte hervorheben","level":3},{"slug":"leitlinien-zahlen","text":"Zahlen","level":3},{"slug":"leitlinien-konsistente-begriffe-fur-entfernen-loschen-und-kundigen","text":"Konsistente Begriffe für Entfernen, Löschen und Kündigen","level":3},{"slug":"leitlinien-speicherplatzangaben-in-binaren-einheiten","text":"Speicherplatzangaben in binären Einheiten","level":3},{"slug":"glossar","text":"Glossar","level":2}]},{"mdxSource":{"compiledSource":"$2f","frontmatter":{"title":"Informationskonzept"},"scope":{}},"examples":{"alert":"$30","alertBadge":"import { AlertBadge } from \"@mittwald/flow-react-components\";\n\n<>\n Update verfügbar\n\n \n Speicherplatz fast voll\n \n\n \n Speicherplatz voll\n \n\n Verifiziert\n\n \n Nicht gefunden\n \n;\n","notification":"$31","tabs":"import {\n Tabs,\n Tab,\n TabTitle,\n AlertIcon,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Tab\n Tab Content\n \n \n \n Tab\n \n \n Tab Content\n \n \n Tab\n Tab Content\n \n;\n"},"slugs":["02-foundations","03-content-guidelines","02-informationskonzept"],"filename":"02-foundations/03-content-guidelines/02-informationskonzept/index.mdx","anchors":[{"slug":"status","text":"Status","level":2},{"slug":"alert","text":"Alert","level":2},{"slug":"alertbadge","text":"AlertBadge","level":2},{"slug":"notifications","text":"Notifications","level":2},{"slug":"status-icon","text":"Status-Icon","level":2}]},{"mdxSource":{"compiledSource":"$32","frontmatter":{"title":"Fehlermeldungen"},"scope":{}},"examples":{},"slugs":["02-foundations","03-content-guidelines","03-fehlermeldungen"],"filename":"02-foundations/03-content-guidelines/03-fehlermeldungen/index.mdx","anchors":[{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"grundlagen","text":"Grundlagen","level":2},{"slug":"grundlagen-kurz-und-hilfreich","text":"Kurz und hilfreich","level":3},{"slug":"grundlagen-verstandliche-sprache-auf-augenhohe","text":"Verständliche Sprache auf Augenhöhe","level":3},{"slug":"grundlagen-schuldzuweisungen-vermeiden","text":"Schuldzuweisungen vermeiden","level":3},{"slug":"grundlagen-fehler-eingestehen-verstandnis-erleichtern","text":"Fehler eingestehen, Verständnis erleichtern","level":3},{"slug":"grundlagen-keine-ungerechtfertigten-entschuldigungen","text":"Keine ungerechtfertigten Entschuldigungen","level":3},{"slug":"grundlagen-wahrscheinlichsten-fehler-nennen","text":"Wahrscheinlichsten Fehler nennen","level":3},{"slug":"grundlagen-nicht-zu-spezifisch","text":"Nicht zu spezifisch","level":3},{"slug":"grundlagen-aktiv-schreiben","text":"Aktiv schreiben","level":3},{"slug":"grundlagen-positiv-formulieren","text":"Positiv formulieren","level":3}]},{"mdxSource":{"compiledSource":"$33","frontmatter":{"title":"Boundaries"},"scope":{}},"examples":{"avatar-error":"import { Avatar } from \"@mittwald/flow-react-components\";\n\n;\n","avatar-loading":"import {\n Avatar,\n Skeleton,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n","chart-error":"import {\n AlertIcon,\n CartesianChart,\n Heading,\n IllustratedMessage,\n Text,\n XAxis,\n YAxis,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Fehler beim Laden\n \n Dieser Bereich konnte nicht geladen werden. Wir\n arbeiten daran das Problem zu beheben.\n \n \n }\n>\n \n \n;\n","chart-loading":"import {\n CartesianChart,\n LoadingSpinner,\n XAxis,\n YAxis,\n} from \"@mittwald/flow-react-components\";\n\n}\n>\n \n \n;\n","content-fragment-error":"import {\n Alert,\n Heading,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Fehler beim Laden\n \n Dieser Bereich konnte nicht geladen werden. Wir arbeiten\n daran das Problem zu beheben.\n \n;\n","content-fragment-loading":"import {\n Section,\n SkeletonText,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n

\n \n \n \n \n \n \n \n \n \n

;\n","context-menu-error":"import { AlertText } from \"@mittwald/flow-react-components\";\n\n\n \n Fehler beim Laden\n \n;\n","context-menu-loading":"$34","field-fragment-loading":"import {\n Label,\n SkeletonText,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n;\n","illustrated-message-error":"import {\n AlertIcon,\n Heading,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Fehler beim Laden\n \n Dieser Bereich konnte nicht geladen werden. Wir arbeiten\n daran das Problem zu beheben.\n \n;\n","illustrated-message-loading":"import {\n Heading,\n Section,\n SkeletonText,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n

\n \n \n \n \n \n \n \n \n \n

\n;\n","layout-card-error":"import {\n AlertIcon,\n LayoutCard,\n Heading,\n Text,\n IllustratedMessage,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Fehler beim Laden\n \n Dieser Bereich konnte nicht geladen werden. Wir\n arbeiten daran das Problem zu beheben.\n \n \n;\n","layout-card-loading":"import {\n Heading,\n LayoutCard,\n Section,\n SkeletonText,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n

\n \n \n \n \n \n \n \n \n \n

\n;\n","modal-error":"import {\n ActionGroup,\n AlertIcon,\n Button,\n Heading,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n

\n \n \n Fehler beim Laden\n \n Dieser Bereich konnte nicht geladen werden. Wir\n arbeiten daran das Problem zu beheben.\n \n \n

\n \n \n \n \n;\n","modal-loading":"import { LoadingSpinner } from \"@mittwald/flow-react-components\";\n\n\n \n;\n","section-error":"import {\n AlertIcon,\n Heading,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n

\n \n \n Fehler beim Laden\n \n \n Dieser Bereich konnte nicht geladen werden. Wir arbeiten\n daran das Problem zu beheben.\n \n

;\n","section-loading":"import {\n Heading,\n Section,\n SkeletonText,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n

\n \n \n \n \n \n \n \n \n \n

;\n","text-error":"import { AlertText } from \"@mittwald/flow-react-components\";\n\nFehler beim Laden;\n","text-loading":"import {\n Text,\n SkeletonText,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n"},"slugs":["02-foundations","04-internal","01-boundaries"],"filename":"02-foundations/04-internal/01-boundaries/index.mdx","anchors":[{"slug":"technische-umsetzung","text":"Technische Umsetzung","level":2},{"slug":"technische-umsetzung-inhalte-einer-layoutcard","text":"Inhalte einer LayoutCard","level":3},{"slug":"technische-umsetzung-modals","text":"Modals","level":3},{"slug":"technische-umsetzung-inhalte-einzelner-sections","text":"Inhalte einzelner Sections","level":3},{"slug":"technische-umsetzung-inhalte-eines-diagramms","text":"Inhalte eines Diagramms","level":3},{"slug":"technische-umsetzung-inhalte-einzelner-elemente","text":"Inhalte einzelner Elemente","level":3},{"slug":"weitere-empfehlungen","text":"Weitere Empfehlungen","level":2}]},{"mdxSource":{"compiledSource":"$35","frontmatter":{"title":"Anlegen und Bearbeiten"},"scope":{}},"examples":{"app-details":"$36","app-illustrated-message":"$37","create-container":"$38","domain-list":"$39","install-app":"$3a","install-extension":"$3b","project-illustrated-message":"import {\n ActionGroup,\n Button,\n Heading,\n IconProject,\n IllustratedMessage,\n Text,\n LayoutCard,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Erstes Projekt anlegen\n \n Du hast noch keine Projekte angelegt! Lege ein Projekt\n an und schon kannst du mit dem Entwickeln loslegen.\n \n\n \n \n \n \n \n;\n","project-list":"$3c"},"slugs":["03-patterns","01-patterns","anlegeprozess"],"filename":"03-patterns/01-patterns/anlegeprozess/index.mdx","anchors":[{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"grundlagen","text":"Grundlagen","level":2},{"slug":"grundlagen-modal-vs-offcanvas","text":"Modal vs. OffCanvas","level":3},{"slug":"grundlagen-abhangige-information","text":"Abhängige Information","level":3},{"slug":"grundlagen-komplexe-prozesse","text":"Komplexe Prozesse","level":3},{"slug":"anlegen","text":"Anlegen","level":2},{"slug":"anlegen-leerer-zustand-vs-vorhandener-inhalt","text":"Leerer Zustand vs. vorhandener Inhalt","level":3},{"slug":"anlegen-gleiche-und-unterschiedliche-elemente","text":"Gleiche und unterschiedliche Elemente","level":3},{"slug":"anlegen-mehr-als-5-oder-erklarungsbedurftige-elemente","text":"Mehr als 5 oder erklärungsbedürftige Elemente","level":3},{"slug":"bearbeiten","text":"Bearbeiten","level":2}]},{"mdxSource":{"compiledSource":"$3d","frontmatter":{"title":"Dashboard"},"scope":{}},"examples":{"customer-dashboard":"$3e","dashboard":"$3f","project-dashboard":"$40"},"slugs":["03-patterns","01-patterns","dashboard"],"filename":"03-patterns/01-patterns/dashboard/index.mdx","anchors":[{"slug":"zentrale-merkmale","text":"Zentrale Merkmale","level":2},{"slug":"aufbau","text":"Aufbau","level":2},{"slug":"willkommens-dashboard","text":"Willkommens-Dashboard","level":2},{"slug":"detail-dashboard","text":"Detail-Dashboard","level":2},{"slug":"detail-dashboard-layoutcard-kombiniert-mit-accentbox","text":"LayoutCard kombiniert mit AccentBox","level":3}]},{"mdxSource":{"compiledSource":"$41","frontmatter":{"title":"Detailseite"},"scope":{}},"examples":{"detail-page":"$42"},"slugs":["03-patterns","01-patterns","detail-page"],"filename":"03-patterns/01-patterns/detail-page/index.mdx","anchors":[{"slug":"code-beispiel","text":"Code-Beispiel","level":2},{"slug":"contentheader","text":"ContentHeader","level":2},{"slug":"contentheader-pagetitle","text":"PageTitle","level":3},{"slug":"contentheader-breadcrumb","text":"Breadcrumb","level":3},{"slug":"contentheader-actionmenu","text":"ActionMenu","level":3},{"slug":"content","text":"Content","level":2},{"slug":"content-layoutcard","text":"LayoutCard","level":3},{"slug":"content-tabnavigation","text":"TabNavigation","level":3},{"slug":"content-sections","text":"Sections","level":3},{"slug":"content-columnlayout","text":"ColumnLayout","level":3}]},{"mdxSource":{"compiledSource":"$43","frontmatter":{"title":"Error Handling"},"scope":{}},"examples":{"alert-text":"$44","illustrated-message":"import {\n Flex,\n Heading,\n IconDanger,\n IllustratedMessage,\n LayoutCard,\n Text,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n return (\n \n \n Mein Projekt\n \n\n \n \n \n Fehler beim Laden von Daten\n \n Dieser Bereich konnte nicht geladen werden. Wir\n arbeiten daran das Problem zu beheben. Bitte\n habe etwas Geduld und probiere es später noch\n einmal.\n \n \n \n \n );\n};\n","modal":"$45"},"slugs":["03-patterns","01-patterns","errorhandling"],"filename":"03-patterns/01-patterns/errorhandling/index.mdx","anchors":[{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"fehler-beim-laden-von-inhalten","text":"Fehler beim Laden von Inhalten","level":2},{"slug":"fehler-beim-durchfuhren-von-aktionen","text":"Fehler beim Durchführen von Aktionen","level":2},{"slug":"fehler-beim-durchfuhren-von-aktionen-fehler-durch-ungultige-eingaben","text":"Fehler durch ungültige Eingaben","level":3},{"slug":"fehler-beim-durchfuhren-von-aktionen-fehler-bei-serverseitigen-aktionen","text":"Fehler bei serverseitigen Aktionen","level":3}]},{"mdxSource":{"compiledSource":"$46","frontmatter":{"title":"Forms"},"scope":{}},"examples":{"form":"$47","validation":"$48"},"slugs":["03-patterns","01-patterns","forms"],"filename":"03-patterns/01-patterns/forms/index.mdx","anchors":[{"slug":"aufbau-einer-form","text":"Aufbau einer Form","level":2},{"slug":"aufbau-einer-form-progressively-disclosed-form-controls","text":"Progressively Disclosed Form Controls","level":3},{"slug":"aufbau-eines-form-controls","text":"Aufbau eines Form Controls","level":2},{"slug":"aufbau-eines-form-controls-label","text":"Label","level":3},{"slug":"aufbau-eines-form-controls-fields-controls","text":"Fields / Controls","level":3},{"slug":"aufbau-eines-form-controls-fielddescription","text":"FieldDescription","level":3},{"slug":"aufbau-eines-form-controls-fielderror","text":"FieldError","level":3},{"slug":"aufbau-eines-form-controls-placeholder","text":"Placeholder","level":3},{"slug":"validation","text":"Validation","level":2},{"slug":"validation-quick-submit","text":"Quick Submit","level":3}]},{"mdxSource":{"compiledSource":"$49","frontmatter":{"title":"Listen, Raster und Tabellen"},"scope":{}},"examples":{"domain-list":"$4a","project-list-empty":"import {\n ActionGroup,\n Button,\n Flex,\n Heading,\n IconProject,\n IllustratedMessage,\n LayoutCard,\n Text,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n return (\n \n \n Projekte\n \n \n \n \n Erstes Projekt anlegen\n \n Du hast noch keine Projekte angelegt! Lege ein\n Projekt an und schon kannst du mit dem\n Entwickeln loslegen.\n \n \n \n \n Tarif bestellen\n \n \n \n \n \n );\n};\n","project-list":"$4b","server-list":"$4c","ticket-list":"$4d"},"slugs":["03-patterns","01-patterns","list-tile-table"],"filename":"03-patterns/01-patterns/list-tile-table/index.mdx","anchors":[{"slug":"zentrale-merkmale","text":"Zentrale Merkmale","level":2},{"slug":"zentrale-merkmale-listenansicht","text":"Listenansicht","level":3},{"slug":"zentrale-merkmale-rasteransicht","text":"Rasteransicht","level":3},{"slug":"zentrale-merkmale-tabellenansicht","text":"Tabellenansicht","level":3},{"slug":"position-und-aufbau","text":"Position und Aufbau","level":2},{"slug":"position-und-aufbau-suche-filter-sortierung-und-actions","text":"Suche, Filter, Sortierung und Actions","level":3},{"slug":"erstes-anlegen","text":"Erstes Anlegen","level":2}]},{"mdxSource":{"compiledSource":"$4e","frontmatter":{"title":"Navigation"},"scope":{}},"examples":{"navigation":"$4f","tab-navigation":"$50"},"slugs":["03-patterns","01-patterns","navigation"],"filename":"03-patterns/01-patterns/navigation/index.mdx","anchors":[{"slug":"best-practices","text":"Best Practices","level":2},{"slug":"navigationsstrukturen","text":"Navigationsstrukturen","level":2},{"slug":"navigationsstrukturen-hauptnavigation","text":"Hauptnavigation","level":3},{"slug":"navigationsstrukturen-content-navigation","text":"Content-Navigation","level":3},{"slug":"navigationsstrukturen-erganzende-navigation","text":"Ergänzende Navigation","level":3},{"slug":"accessibility","text":"Accessibility","level":2}]},{"mdxSource":{"compiledSource":"$51","frontmatter":{"title":"Multi Upload"},"scope":{}},"examples":{"default":"$52"},"slugs":["03-patterns","02-codesnippets","multi-upload"],"filename":"03-patterns/02-codesnippets/multi-upload/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"$53","frontmatter":{"title":"Zeitintervalle"},"scope":{}},"examples":{"default":"$54"},"slugs":["03-patterns","02-codesnippets","zeitintervalle"],"filename":"03-patterns/02-codesnippets/zeitintervalle/index.mdx","anchors":[{"slug":"aufbau","text":"Aufbau","level":2},{"slug":"best-practices","text":"Best Practices","level":2}]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 gruppiert zusammengehörige Actions, etwa in Sections oder Modals."},"scope":{}},"examples":{"default":"import {\n ActionGroup,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n;\n","link":"import {\n ActionGroup,\n Button,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Passwort vergessen?\n \n;\n","preserveOrder":"import {\n ActionGroup,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n;\n","size":"import {\n ActionGroup,\n Button,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Passwort vergessen?\n \n;\n","slots":"import {\n ActionGroup,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n;\n"},"slugs":["04-components","actions","action-group"],"filename":"04-components/actions/action-group/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action umschließt einen Button und gibt Feedback bei asynchronen Aktionen."},"scope":{}},"examples":{"abort":"import { sleep } from \"@/content/04-components/actions/action/examples/lib\";\nimport {\n abortAction,\n Action,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n {\n console.log(\"Outer action\");\n }}\n>\n {\n await sleep();\n console.log(\"Inner action\");\n abortAction();\n }}\n >\n \n \n;\n","confirmation":"import {\n Action,\n ActionGroup,\n Button,\n Content,\n Heading,\n Modal,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/04-components/actions/action/examples/lib\";\n\n\n \n Projekt löschen\n \n Wenn das Projekt "Test" einmal gelöscht ist,\n kann es nicht wiederhergestellt werden.\n \n \n \n \n \n \n \n;\n","default":"import {\n Action,\n Button,\n} from \"@mittwald/flow-react-components\";\nimport { sleep } from \"@/content/04-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import {\n Action,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import {\n Action,\n Button,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/04-components/actions/action/examples/lib\";\n\n\n \n;\n","menuItem":"import {\n Action,\n Button,\n ContextMenuTrigger,\n ContextMenu,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\nimport { sleepLong } from \"@/content/04-components/actions/action/examples/lib\";\n\n\n \n \n \n Herunterladen\n \n \n;\n","nested":"import {\n Action,\n Button,\n} from \"@mittwald/flow-react-components\";\n\n console.log(\"close modal\")}>\n console.log(\"save\")}>\n \n \n;\n"},"slugs":["04-components","actions","action"],"filename":"04-components/actions/action/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new 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 führen User Aktionen aus."},"scope":{}},"examples":{"align":"import {\n Align,\n Button,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Weiterleitungsziel\n \n \n;\n","colors":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","dark":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","default":"import { Button } from \"@mittwald/flow-react-components\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Button\n;\n","hierarchy-order-do":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n;\n","hierarchy-order-dont":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n;\n","hierarchy-soft-do":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","hierarchy-solid-do":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","icon-clarity-do":"import {\n Button,\n IconFilter,\n IconSorting,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\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<>\n \n \n \n \n;\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\n \n \n \n \n \n \n Weiterleitungsaddresse\n \n \n \n E-Mail-Adresse\n \n \n;\n","icon-text":"import {\n Button,\n IconChevronDown,\n IconClose,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","icon":"import {\n Button,\n IconHome,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","light":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","mobile-width-group-do":"import {\n ActionGroup,\n Button,\n Heading,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n

\n Projekt anlegen\n

\n \n Projekt Name\n \n

\n \n \n \n \n;\n","mobile-width-standard-do":"import {\n Button,\n HeaderNavigation,\n Heading,\n IconChevronDown,\n IconMenu,\n IconSearch,\n IconSupport,\n LayoutCard,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n

\n \n \n \n \n \n \n \n Projekte\n ...\n \n

;\n","sizes-dont":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n;\n","sizes":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","states":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","text-clarity-do":"import {\n ActionGroup,\n Button,\n Heading,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n

\n \n Möchtest du die Bestellung wirklich verlassen?\n \n

\n \n Bist du sicher, dass du die Bestellung wirklich\n verlassen möchtest? Deine eingegebenen Daten werden\n nicht gespeichert.\n \n

\n \n \n \n \n;\n","text-clarity-dont":"import {\n ActionGroup,\n Button,\n Heading,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n

\n \n Möchtest du die Bestellung wirklich verlassen?\n \n

\n \n Bist du sicher, dass du die Bestellung wirklich\n verlassen möchtest? Deine eingegebenen Daten werden\n nicht gespeichert.\n \n

\n \n \n \n \n;\n","text-length-do":"import { Button } from \"@mittwald/flow-react-components\";\n\n;\n","text-length-dont":"import { Button } from \"@mittwald/flow-react-components\";\n\n;\n","variants":"import { Button } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n"},"slugs":["04-components","actions","button"],"filename":"04-components/actions/button/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Das ContextMenu öffnet ein Popover mit Aktionen oder Links, meist über einen Button."},"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\n \n \n

\n \n \n Max Mustermann\n \n \n \n Max Mustermann\n

\n \n

\n \n Settings\n \n \n Logout\n \n

\n \n;\n","default":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n IconInfo,\n MenuItem,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n {\n alert(id);\n }}\n >\n \n \n Item 1\n \n \n \n Item 2\n \n \n \n Item 3\n \n \n;\n","modal":"$55","multi-select":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\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\n \n \n \n Section 1\n Item 1\n Item 2\n Item 3\n \n \n \n Section 2\n Item 4\n Item 5\n \n \n;\n","sectionSelectionMode":"import {\n Button,\n ContextMenu,\n ContextMenuSection,\n ContextMenuTrigger,\n MenuItem,\n Separator,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n Item 1\n Item 2\n Item 3\n \n \n \n Item 4\n Item 5\n Item 6\n \n \n;\n","separator":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n Separator,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","states":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Disabled\n Pending\n Succeeded\n Failed\n \n;\n","switch":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","width":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n {\n alert(id);\n }}\n >\n Mein Projekt\n Mein zweites Projekt\n \n Mein drittes Projekt mit einem sehr langen Namen\n \n \n;\n"},"slugs":["04-components","actions","context-menu"],"filename":"04-components/actions/context-menu/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Mit dem CopyButton können Informationen mit einem Klick in die Zwischenablage kopiert werden."},"scope":{}},"examples":{"align":"import {\n Align,\n CopyButton,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n mail.agenturserver.de\n \n;\n","default":"import { CopyButton } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","actions","copy-button"],"filename":"04-components/actions/copy-button/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 kombiniert den MessageThread mit einer Texteingabe."},"scope":{}},"examples":{"default":"$56","form":"$57","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\n \n \n

\n \n \n Max Mustermann\n \n \n Max Mustermann\n \n \n

\n \n \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 \n \n \n \n \n \n;\n","markdown-editor":"$58","upload":"$59"},"slugs":["04-components","chat","chat"],"filename":"04-components/chat/chat/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 gruppiert Messages zu einem Gesprächsverlauf."},"scope":{}},"examples":{"default":"$5a","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\n \n

\n \n \n Max Mustermann\n \n \n Max Mustermann\n \n \n

\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing.\n \n \n \n\n \n

\n \n \n John Doe\n \n \n John Doe\n \n \n

\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam.\n \n \n \n;\n"},"slugs":["04-components","chat","message-thread"],"filename":"04-components/chat/message-thread/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Eine Message stellt Nachrichten mit Autor-Informationen, Datum und Aktionen übersichtlich dar."},"scope":{}},"examples":{"action":"$5b","color":"import {\n Content,\n Message,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \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 \n \n;\n","default":"$5c","markdown":"$5d","sender":"$5e"},"slugs":["04-components","chat","message"],"filename":"04-components/chat/message/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung."},"scope":{}},"examples":{"clickable":"import {\n Avatar,\n AvatarStack,\n Button,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n console.log(\"count clicked\")}\n>\n \n \n \n;\n","default":"import {\n Avatar,\n AvatarStack,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Max Mustermann\n \n \n John Doe\n \n \n Gillian Gopher\n \n;\n","sizes":"import {\n Avatar,\n AvatarStack,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n Max Mustermann\n \n \n John Doe\n \n \n \n \n Max Mustermann\n \n \n John Doe\n \n \n \n \n Max Mustermann\n \n \n John Doe\n \n \n \n \n Max Mustermann\n \n \n John Doe\n \n \n;\n","total-count":"import {\n Avatar,\n AvatarStack,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Max Mustermann\n \n \n John Doe\n \n \n Gillian Gopher\n \n;\n"},"slugs":["04-components","content","avatar-stack"],"filename":"04-components/content/avatar-stack/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Ein Avatar repräsentiert User visuell, per Image, Initials oder Icon."},"scope":{}},"examples":{"align":"import {\n Align,\n Avatar,\n Initials,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Max Mustermann\n \n \n Max Mustermann\n Organisationsinhaber\n \n;\n","colors":"import {\n Avatar,\n IconCustomer,\n IconHome,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Gillian Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gilian Gopher\n \n \n \n \n \n \n \n;\n","default":"import {\n Avatar,\n Image,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n","icon":"import {\n Avatar,\n IconHome,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n","image":"import {\n Avatar,\n Image,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n","initials":"import {\n Avatar,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n\n Gillian Gopher\n;\n","sizes":"import {\n Avatar,\n Initials,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n","status-example":"$5f","status":"import { Avatar } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n \n;\n"},"slugs":["04-components","content","avatar"],"filename":"04-components/content/avatar/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 dient der übersichtlichen Darstellung von Code als Block mit Syntax-Highlighting."},"scope":{}},"examples":{"children":"import {\n CodeBlock,\n Color,\n} from \"@mittwald/flow-react-components\";\n\n\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n \n
\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n;\n","copyable":"import { CodeBlock } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { CodeBlock } from \"@mittwald/flow-react-components\";\n\n;\n","lineNumbers":"import { CodeBlock } from \"@mittwald/flow-react-components\";\n\n;\n","truncateLines":"import { CodeBlock } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","content","code-block"],"filename":"04-components/content/code-block/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben."},"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\n \n \n \n mStudio Extension{\" \"}\n selber entwickeln\n \n \n \n \n Veröffentliche{\" \"}\n eigene Features im\n mStudio\n \n \n \n \n \n Contributor Landingpage\n \n \n;\n","color":"import { Color } from \"@mittwald/flow-react-components\";\n\n<>\n blue\n violet\n lilac\n teal\n;\n","custom":"import { Color } from \"@mittwald/flow-react-components\";\n\ncustom;\n","default":"import {\n Color,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Veröffentliche{\" \"}\n eigene Features im mStudio\n \n;\n","heading":"import {\n Color,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n mStudio Extension selber\n entwickeln\n;\n","status":"import { Color } from \"@mittwald/flow-react-components\";\n\n<>\n danger\n warning\n info\n success\n unavialable\n;\n"},"slugs":["04-components","content","color"],"filename":"04-components/content/color/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Headings strukturieren den Inhalt einer Seite in Wichtigkeitsstufen."},"scope":{}},"examples":{"badge":"import {\n AlertBadge,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n E-Mail-Adresse\n \n Speicherplatz voll\n \n;\n","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\n Rechte & Rollen\n \n \n \n \n;\n","danger":"import {\n Button,\n Heading,\n IconDanger,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Fehler beim Laden von Daten\n \n Dieser Bereich konnte nicht geladen werden. Wir arbeiten\n daran das Problem zu beheben. Bitte habe etwas Geduld\n und probiere es später noch einmal.\n \n \n;\n","dark":"import {\n Button,\n Heading,\n IconApp,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Keine Apps installiert\n \n Lege deine erste App an, um mit der Arbeit an deiner\n Webseite loszulegen.\n \n \n;\n","default":"import {\n Button,\n Heading,\n IconApp,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Keine Apps installiert\n \n Lege deine erste App an, um mit der Arbeit an deiner\n Webseite loszulegen.\n \n \n;\n","light":"import {\n Button,\n Heading,\n IconApp,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Keine Apps installiert\n \n Lege deine erste App an, um mit der Arbeit an deiner\n Webseite loszulegen.\n \n \n;\n","unavailable":"import {\n Link,\n Heading,\n IconUnavailable,\n IllustratedMessage,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n Zum Dashboard\n;\n"},"slugs":["04-components","content","illustrated-message"],"filename":"04-components/content/illustrated-message/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden."},"scope":{}},"examples":{"aspectRatio":"import { Image } from \"@mittwald/flow-react-components\";\n\n;\n","border":"import { Image } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { Image } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","content","image"],"filename":"04-components/content/image/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor."},"scope":{}},"examples":{"dark":"import {\n InlineCode,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Gib yarn start ein\n um deine App zu starten.\n;\n","default":"import {\n InlineCode,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n","light":"import {\n InlineCode,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Gib yarn start ein\n um deine App zu starten.\n;\n"},"slugs":["04-components","content","inline-code"],"filename":"04-components/content/inline-code/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Kbd","description":"Kbd stellt Tastaturkürzel dar und passt sich dem Betriebssystem an."},"scope":{}},"examples":{"children":"import { Kbd } from \"@mittwald/flow-react-components\";\n\n\n + ,{\" \"}\n + \n;\n","context-menu":"import {\n Button,\n ContextMenu,\n ContextMenuTrigger,\n MenuItem,\n Kbd,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n Speichern \n \n \n Kopieren \n \n \n Einfügen \n \n \n;\n","default":"import { Kbd } from \"@mittwald/flow-react-components\";\n\n;\n","search-field":"import {\n SearchField,\n Kbd,\n} from \"@mittwald/flow-react-components\";\n\n\n \n;\n","text":"import { Text, Kbd } from \"@mittwald/flow-react-components\";\n\n\n Verwende um die Suche zu\n öffnen.\n;\n","variants":"import { Kbd } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n"},"slugs":["04-components","content","kbd"],"filename":"04-components/content/kbd/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label erläutert Eingabeanforderungen in Formularen."},"scope":{}},"examples":{"default":"import { Label } from \"@mittwald/flow-react-components\";\n\nLabel;\n","do":"import { Label } from \"@mittwald/flow-react-components\";\n\n<>\n Vorname\n E-Mail\n Verknüpfte App\n Datenbankbenutzer\n;\n","dont":"import { Label } from \"@mittwald/flow-react-components\";\n\n<>\n Bitte gib deinen Vornamen ein\n E-Mail (name@mail.de)\n \n Mit welcher App ist die Datenbank verknüpft?\n \n Datenbankbenutzer:\n;\n","states":"import { Label } from \"@mittwald/flow-react-components\";\n\n<>\n Default\n Disabled\n;\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\n \n Cronjob\n Aktiviert\n \n \n \n Beschreibung\n \n \n Nächste Ausführung\n 10.06.2024 um 09:25 Uhr\n \n \n ;\n"},"slugs":["04-components","content","label"],"filename":"04-components/content/label/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new 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 mit beschreibendem Label."},"scope":{}},"examples":{"copy-button":"import {\n Content,\n CopyButton,\n Label,\n LabeledValue,\n} from \"@mittwald/flow-react-components\";\n\n\n Short-ID\n p-wut3uw\n \n;\n","default":"import {\n Content,\n Label,\n LabeledValue,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicherplatz\n 20 GB\n;\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\n \n Projektname\n Dolce Vita\n \n\n \n Short-ID\n p-wut3uw\n \n \n\n \n Projektdomain\n \n p-lol3qe.project.space\n \n \n \n \n\n \n Server\n Dolce-Server-01\n \n\n \n A-Record\n 45.144.187.21\n \n \n\n \n Erstellungsdatum\n 06.12.2023 um 11:40 Uhr\n \n;\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\n \n Erstellungsdatum\n 06.12.2023 um 11:40 Uhr\n \n\n \n Short-ID\n p-wut3uw\n \n \n\n \n A-Record\n 45.144.187.21\n \n \n\n \n Server\n Dolce-Server-01\n \n\n \n Projektname\n Dolce Vita\n \n\n \n Projektdomain\n \n p-lol3qe.project.space\n \n \n \n \n;\n","inline-code":"import {\n InlineCode,\n Label,\n LabeledValue,\n} from \"@mittwald/flow-react-components\";\n\n\n Datenbankserver\n \n mysql-kq3v4g.ge-s-hopovh.db.project.host\n \n;\n","link":"import {\n Label,\n LabeledValue,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Server\n MyServ-01\n;\n"},"slugs":["04-components","content","labeled-value"],"filename":"04-components/content/labeled-value/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Die Markdown Component rendert Texteingaben im Markdown-Format."},"scope":{}},"examples":{"codeBlock":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n {\"```json\\n\" +\n \"{\\n\" +\n ' \"projectId\": \"b3a96db5-ba8f-40dd-9100-bab43ac1f698\",\\n' +\n ' \"name\": \"My Project\"\\n' +\n \"}\\n\" +\n \"```\\n\"}\n;\n","dark":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n Lorem ipsum dolor sit amet **consectetur adipisicing**\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\n ***fugit***.\n;\n","default":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n Lorem ipsum dolor sit amet **consectetur adipisicing**\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\n ***fugit***.\n;\n","heading":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\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;\n","headingOffset":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n {\n \"# Heading Level 1 -> 2 \\n## Heading Level 2 -> 3 \\n### Heading Level 3 -> 4 \\n#### Heading Level 4 -> 5 \\n##### Heading Level 5 -> 6 \\n###### Heading Level 6 -> 6\"\n }\n;\n","inlineCode":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n{\"`127.0.0.1`\"};\n","light":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n Lorem ipsum dolor sit amet **consectetur adipisicing**\n elit. Cumque eius *quam quas vel voluptas* ullam aliquid\n ***fugit***.\n;\n","link":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n[mittwald.de](https://mittwald.de).;\n","orderedList":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n {\n \"1. Ordered list item 1 \\n 2. Ordered list item 2 \\n 3. Ordered list item 3\"\n }\n;\n","quote":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n{\"> This is a quote\"};\n","table":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n {\"| Column 1 | Column 2 |\\n\" +\n \"|---------------|---------------|\\n\" +\n \"| Row 1 Cell 1 | Row 1 Cell 2 |\\n\" +\n \"| Row 2 Cell 1 | Row 2 Cell 2 |\\n\"}\n;\n","unorderedList":"import { Markdown } from \"@mittwald/flow-react-components\";\n\n\n {\n \"- Unordered list item 1 \\n - Unordered list item 2 \\n - Unordered list item 3\"\n }\n;\n"},"slugs":["04-components","content","markdown"],"filename":"04-components/content/markdown/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton zeigt eine vereinfachte Vorschau, bis der Content geladen ist."},"scope":{}},"examples":{"custom-size":"import { Skeleton } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","default":"import { Skeleton } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","content","skeleton"],"filename":"04-components/content/skeleton/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Component sorgt für eine konsistente Formatierung und Strukturierung von Text."},"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<>\n \n \n mail.agenturserver.de\n \n\n \n mail.agenturserver.de\n \n \n\n \n mail.agenturserver.de\n \n \n \n \n \n \n \n 100 ms\n Serveroperationen\n \n \n Optimierungsbedarf\n \n \n \n \n;\n","default":"import {\n BigNumber,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n 69%\n Performance\n;\n","rating":"import {\n BigNumber,\n Flex,\n Rating,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n 80%\n Performance\n \n \n;\n"},"slugs":["04-components","data-visualisation","big-number"],"filename":"04-components/data-visualisation/big-number/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CartesianChart","description":"Das CartesianChart stellt Metriken über Zeit als Liniendiagramm oder Flächendiagramm dar."},"scope":{}},"examples":{"area":"$60","colors":"$61","default":"$62","emptyView":"import {\n CartesianChart,\n Flex,\n Heading,\n IconMonitoring,\n IllustratedMessage,\n XAxis,\n YAxis,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n const emptyView = (\n \n \n Keine Daten verfügbar\n \n );\n\n return (\n \n \n \n \n \n \n );\n};\n","line":"$63","synced":"$64"},"slugs":["04-components","data-visualisation","cartesian-chart"],"filename":"04-components/data-visualisation/cartesian-chart/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"DonutChart","description":"Das DonutChart stellt Verteilungen und Anteile als Ring dar."},"scope":{}},"examples":{"children":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n\n 300\n GB\n;\n","decimal":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n;\n","segments":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n;\n","size":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n;\n","status":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n<>\n \n \n \n \n;\n","unit":"import { DonutChart } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","data-visualisation","donut-chart"],"filename":"04-components/data-visualisation/donut-chart/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Autocomplete","description":"Autocomplete ergänzt die Texteingabe um kontextbezogene Vorschläge."},"scope":{}},"examples":{"default":"import {\n Option,\n Label,\n TextField,\n Autocomplete,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () => {\n const [input, setInput] = useState(\"\");\n\n const generateSuggestItems = () => {\n return [\n \"example.com\",\n \"test.org\",\n \"email.net\",\n \"mail.com\",\n ]\n .map((d) => {\n const email = `${input.split(\"@\")[0]}@${d}`;\n return (\n \n {email}\n \n );\n })\n .filter(() => input);\n };\n\n return (\n \n \n Email\n \n {generateSuggestItems()}\n \n );\n};\n","filter":"import {\n Option,\n Label,\n TextField,\n Autocomplete,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () => {\n const [input, setInput] = useState(\"\");\n\n const generateSuggestItems = () => {\n return [\n \"example.com\",\n \"test.org\",\n \"email.net\",\n \"mail.com\",\n ]\n .map((d) => {\n const email = `${input.split(\"@\")[0]}@${d}`;\n return (\n \n {email}\n \n );\n })\n .filter(() => input);\n };\n\n const domainDotComFilter = (\n textValue: string,\n ignored_inputValue: string,\n ) => {\n return textValue.includes(\".com\");\n };\n\n return (\n \n \n Email\n \n {generateSuggestItems()}\n \n );\n};\n","form":"$65","search":"import {\n Label,\n Autocomplete,\n SearchField,\n Option,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () => {\n const [input, setInput] = useState(\"\");\n\n const generateSuggestItems = () => {\n return [\n \"example.com\",\n \"test.org\",\n \"email.net\",\n \"mail.com\",\n ]\n .map((d) => {\n const email = `${input.split(\"@\")[0]}@${d}`;\n return (\n \n {email}\n \n );\n })\n .filter(() => input);\n };\n\n return (\n \n \n Email\n \n {generateSuggestItems()}\n \n );\n};\n"},"slugs":["04-components","form-controls","autocomplete"],"filename":"04-components/form-controls/autocomplete/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton ist eine auffälligere Variante der Checkbox."},"scope":{}},"examples":{"default":"import { CheckboxButton } from \"@mittwald/flow-react-components\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","form":"import {\n CheckboxButton,\n Section,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n SubmitButton,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/04-components/actions/action/examples/lib\";\n\nexport default () => {\n const form = useForm<{ acceptTerms: boolean }>();\n const Field = typedField(form);\n\n return (\n \n \n \n \n Ich stimme den AGBs zu und bestätige, dass ich\n die Datenschutzhinweise zur Kenntnis genommen\n habe.\n \n \n Speichern\n \n \n );\n};\n"},"slugs":["04-components","form-controls","checkbox-button"],"filename":"04-components/form-controls/checkbox-button/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons zusammen."},"scope":{}},"examples":{"buttons":"import {\n CheckboxButton,\n CheckboxGroup,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Berechtigungen\n Lesen\n Schreiben\n;\n","contextualHelp":"import {\n Button,\n Checkbox,\n CheckboxGroup,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Berechtigungen\n \n \n;\n","allowsCustomValue":"import {\n ComboBox,\n Label,\n Option,\n} from \"@mittwald/flow-react-components\";\n\n\n Domain\n \n \n \n \n \n \n \n \n;\n","contextualHelp":"import {\n Button,\n ComboBox,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Option,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Domain\n \n \n;\n","default":"import {\n Button,\n FileField,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Zertifikat\n \n;\n","disabled":"import {\n Button,\n FileField,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Zertifikat\n \n;\n","fieldDescription":"import {\n Button,\n FieldDescription,\n FileField,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Zertifikat\n \n \n Erlaubte Dateitypen sind .jpeg und .png\n \n;\n","form":"$67","invalid":"import {\n Button,\n FieldError,\n FileField,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Zertifikat\n \n \n Wir konnten das Zertifikat nicht hochladen. Bitte\n verwende eine .txt-Datei.\n \n;\n","multiple":"import {\n Button,\n FileField,\n Label,\n Section,\n LabeledValue,\n Text,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () => {\n const [files, setFiles] = useState(null);\n\n return (\n \n \n Dateien\n \n \n\n \n Ausgewählte Dateien\n \n {files\n ? [...files].map((file) => file.name).join(\", \")\n : \"-\"}\n \n \n \n );\n};\n"},"slugs":["04-components","form-controls","file-field"],"filename":"04-components/form-controls/file-field/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"MarkdownEditor","description":"Der MarkdownEditor formatiert Text per Markdown-Syntax und bietet eine Vorschau."},"scope":{}},"examples":{"allowResize":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","autoResizeMaxRows":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","characterCount":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","chat":"$68","combinedResize":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","disabled":"import { MarkdownEditor } from \"@mittwald/flow-react-components\";\n\n;\n","form":"import {\n Label,\n MarkdownEditor,\n Section,\n ActionGroup,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n SubmitButton,\n} from \"@mittwald/flow-react-components/react-hook-form\";\n\nexport default () => {\n const form = useForm({\n defaultValues: { message: \"\" },\n });\n return (\n \n console.log(v.message)}\n >\n \n \n Nachricht\n \n \n \n Senden\n \n \n \n );\n};\n"},"slugs":["04-components","form-controls","markdown-editor"],"filename":"04-components/form-controls/markdown-editor/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField erlaubt die Eingabe und schrittweise Anpassung von Zahlen."},"scope":{}},"examples":{"align":"import {\n Align,\n Button,\n Label,\n NumberField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Alter\n \n \n;\n","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n NumberField,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Alter\n \n \n \n );\n};\n","copyButton":"import {\n CopyButton,\n Label,\n PasswordCreationField,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n return (\n \n Password\n \n \n );\n};\n","default":"import {\n Label,\n PasswordCreationField,\n} from \"@mittwald/flow-react-components\";\nimport { useState } from \"react\";\n\nexport default () => {\n const [password, setPassword] = useState(\"\");\n\n return (\n \n Password\n \n );\n};\n","disabled":"import {\n Label,\n PasswordCreationField,\n} from \"@mittwald/flow-react-components\";\n\n\n Password\n;\n","form":"$69","rules":"$6a"},"slugs":["04-components","form-controls","password-creation-field"],"filename":"04-components/form-controls/password-creation-field/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Mit einer RadioGroup wählt der User genau eine Option aus einer Gruppe aus."},"scope":{}},"examples":{"buttons":"import {\n Label,\n RadioButton,\n RadioGroup,\n} from \"@mittwald/flow-react-components\";\n\n\n Datenbank-Typ\n MySQL\n Redis\n;\n","content":"$6b","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Radio,\n RadioGroup,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Täglicher Kaffeekonsum\n \n \n;\n","default":"import { SearchField } from \"@mittwald/flow-react-components\";\n\n;\n","form":"import {\n SearchField,\n Section,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n SubmitButton,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/04-components/actions/action/examples/lib\";\n\nexport default () => {\n const form = useForm<{ search: string }>();\n const Field = typedField(form);\n\n return (\n \n \n \n \n \n Suchen\n \n \n );\n};\n"},"slugs":["04-components","form-controls","search-field"],"filename":"04-components/form-controls/search-field/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 eine Einfachauswahl aus 2 bis 5 kurzen Optionen."},"scope":{}},"examples":{"changeContent":"$6d","compact":"import {\n ColumnLayout,\n Label,\n Segment,\n SegmentedControl,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Rolle\n Entwickler\n \n Geschäftsführer\n \n Andere\n \n\n \n Rolle\n Entwickler\n \n Geschäftsführer\n \n Andere\n \n;\n","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Segment,\n SegmentedControl,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Zahlungsart\n \n \n;\n","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Option,\n Select,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n;\n","default":"import {\n Label,\n Option,\n Select,\n} from \"@mittwald/flow-react-components\";\n\n;\n","defaultValue":"import {\n Label,\n Option,\n Select,\n} from \"@mittwald/flow-react-components\";\n\n;\n","fieldDescription":"import {\n FieldDescription,\n Label,\n Option,\n Select,\n} from \"@mittwald/flow-react-components\";\n\n;\n","form":"import {\n Label,\n Option,\n Section,\n Select,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n SubmitButton,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/04-components/actions/action/examples/lib\";\n\nexport default () => {\n const form = useForm<{ app: string }>();\n const Field = typedField(form);\n\n return (\n \n \n \n \n \n Speichern\n \n \n );\n};\n","multiple":"import {\n Label,\n Option,\n Select,\n} from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","form-controls","select"],"filename":"04-components/form-controls/select/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Slider ermöglichen die Auswahl von Zahlenwerten innerhalb eines definierten Wertebereichs."},"scope":{}},"examples":{"default":"import {\n Label,\n Slider,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicherplatz\n;\n","form":"$6e"},"slugs":["04-components","form-controls","slider"],"filename":"04-components/form-controls/slider/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Mit einem Switch schalten User Optionen ein oder aus."},"scope":{}},"examples":{"default":"import { Switch } from \"@mittwald/flow-react-components\";\n\nAutoresponder;\n","disabled":"import { Switch } from \"@mittwald/flow-react-components\";\n\nAutoresponder;\n","leading-label":"import { Switch } from \"@mittwald/flow-react-components\";\n\nAutoresponder;\n"},"slugs":["04-components","form-controls","switch"],"filename":"04-components/form-controls/switch/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die TextArea ermöglicht es dem User, längere Texte über mehrere Zeilen hinweg einzugeben."},"scope":{}},"examples":{"align":"import {\n Align,\n Button,\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n \n <Label>Nachricht</Label>\n \n \n;\n","allowResize":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Nachricht</Label>\n;\n","autoResizeMaxRows":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Nachricht</Label>\n;\n","characterCount":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Nachricht</Label>\n;\n","combinedResize":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Nachricht</Label>\n;\n","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n TextArea,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>\n Public Key\n <ContextualHelpTrigger subject=\"Public Key\">\n <Button />\n <ContextualHelp>\n <Text>\n Hier gibt es weitere Informationen, die zu lang\n für die FieldDescription sind.\n </Text>\n </ContextualHelp>\n </ContextualHelpTrigger>\n </Label>\n;\n","default":"import {\n FieldDescription,\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Public Key</Label>\n <FieldDescription>Beginnt mit ssh-rsa</FieldDescription>\n;\n","disabled":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Public Key</Label>\n;\n","form":"import {\n Label,\n Section,\n TextArea,\n} from \"@mittwald/flow-react-components\";\nimport { useForm } from \"react-hook-form\";\nimport {\n Form,\n SubmitButton,\n typedField,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { sleep } from \"@/content/04-components/actions/action/examples/lib\";\n\nexport default () => {\n const form = useForm<{ message: string }>();\n const Field = typedField(form);\n\n return (\n \n \n \n \n <Label>Nachricht</Label>\n \n \n Senden\n \n \n );\n};\n","invalid":"import {\n FieldError,\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Public Key</Label>\n <FieldError>Ungültiger Key</FieldError>\n;\n","required":"import {\n Label,\n TextArea,\n} from \"@mittwald/flow-react-components\";\n\n\n <Label>Public Key</Label>\n;\n"},"slugs":["04-components","form-controls","text-area"],"filename":"04-components/form-controls/text-area/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht die Texteingabe über die Tastatur."},"scope":{}},"examples":{"align":"import {\n Align,\n Button,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Weiterleitungsziel\n \n \n;\n","button":"import {\n Label,\n TextField,\n Button,\n IconStar,\n} from \"@mittwald/flow-react-components\";\n\n\n Label\n \n;\n","characterCount":"import {\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n Benutzername\n;\n","columnLayout":"import {\n ColumnLayout,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Vorname\n \n \n Nachname\n \n \n \n Straße\n \n \n Hausnummer\n \n \n \n \n Stadt\n \n \n PLZ\n \n \n \n Land\n \n;\n","contextualHelp":"import {\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Label,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n URL\n \n \n \n \n \n \n \n \n \n Profil\n \n \n \n Logout\n \n \n \n;\n","dark":"import {\n Button,\n HeaderNavigation,\n IconSearch,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Getting started\n \n Components\n \n \n;\n","default":"import {\n Button,\n HeaderNavigation,\n IconSearch,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Getting started\n \n Components\n \n \n;\n","light":"import {\n Button,\n HeaderNavigation,\n IconSearch,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n Getting started\n \n Components\n \n \n;\n"},"slugs":["04-components","navigation","header-navigation"],"filename":"04-components/navigation/header-navigation/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Ein Link navigiert zu einer anderen Seite, einem Anker oder startet Downloads."},"scope":{}},"examples":{"dark":"import { Link } from \"@mittwald/flow-react-components\";\n\n\n Dark\n;\n","default":"import { Link } from \"@mittwald/flow-react-components\";\n\nZum Dashboard;\n","disabled":"import { Link } from \"@mittwald/flow-react-components\";\n\n\n Disabled\n;\n","download":"import { Link } from \"@mittwald/flow-react-components\";\n\nRechnung herunterladen;\n","external":"import { Link } from \"@mittwald/flow-react-components\";\n\n\n Externer Link\n;\n","inlineText":"import {\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Sieh dir unser Onboarding an, um\n weitere Informationen zu erhalten.\n;\n","light":"import { Link } from \"@mittwald/flow-react-components\";\n\n\n Light\n;\n","position1":"import {\n Header,\n Heading,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Heading 2\n Textlink\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ;\n","position2":"import {\n Header,\n Heading,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Heading 2\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n Textlink\n ;\n","writingExtraDo":"import {\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Links sind wichte Navigationselemente innerhalb von\n Benutzeroberflächen.\n \n Erfahre mehr über Links\n;\n","writingExtraDont":"import {\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Links sind wichte Navigationselemente innerhalb von\n Benutzeroberflächen.\n \n Erfahre mehr\n;\n","writingInlineDo":"import {\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Mit Hilfe des Onboardings kannst du\n direkt loslegen.\n;\n","writingInlineDont":"import {\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit Hilfe des Onboardings kannst du direkt loslegen.\n \n;\n"},"slugs":["04-components","navigation","link"],"filename":"04-components/navigation/link/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Die Navigation dient der Orientierung und führt zu den Unterseiten einer Anwendung."},"scope":{}},"examples":{"badge":"import {\n Badge,\n CounterBadge,\n Link,\n Navigation,\n} from \"@mittwald/flow-react-components\";\n\n\n Apps\n \n Container Neu\n \n \n Benachrichtigungen \n \n;\n","collapsable":"import {\n Label,\n Link,\n Navigation,\n NavigationGroup,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Allgemein\n Dashboard\n \n Performance\n \n \n \n Components\n Apps\n Datenbanken\n Domains\n \n;\n","default":"import {\n Link,\n Navigation,\n} from \"@mittwald/flow-react-components\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import {\n Label,\n Link,\n Navigation,\n NavigationGroup,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Allgemein\n Dashboard\n \n Performance\n \n \n \n Components\n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import {\n IconCustomer,\n IconProject,\n IconServer,\n Link,\n Navigation,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import {\n Label,\n Link,\n Navigation,\n NavigationGroup,\n Separator,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Allgemein\n Dashboard\n \n Performance\n \n \n\n \n\n \n Komponenten\n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["04-components","navigation","navigation"],"filename":"04-components/navigation/navigation/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n stretch: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TabNavigation","description":"Die TabNavigation ordnet Links horizontal an; überzählige rutschen ins ContextMenu."},"scope":{}},"examples":{"default":"import {\n TabNavigation,\n Link,\n AlertIcon,\n} from \"@mittwald/flow-react-components\";\n\n\n Apps\n \n Container\n \n Domains\n E-Mails\n \n Datenbanken\n \n \n Backups\n;\n","layout-card":"import {\n LayoutCard,\n TabNavigation,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Apps\n \n Container\n Domains\n E-Mails\n Backups\n \n \n \n Der Inhalt der aktiven Seite wird unterhalb der\n TabNavigation in derselben LayoutCard dargestellt.\n \n \n;\n","overflow":"import {\n TabNavigation,\n Link,\n LayoutCard,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Dashboard\n Domains\n E-Mail\n Datenbanken\n \n Einstellungen\n \n \n;\n","status":"import {\n AlertIcon,\n Badge,\n TabNavigation,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Dashboard\n \n \n Speicherplatz\n \n \n \n Backups\n Neu\n \n;\n"},"slugs":["04-components","navigation","tab-navigation"],"filename":"04-components/navigation/tab-navigation/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein ContextualHelp bietet dem User weiterführende, hilfreiche Informationen in einem Popover an."},"scope":{}},"examples":{"align":"import {\n Align,\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n mail.agenturserver.de\n\n \n \n \n \n \n \n \n \n \n;\n","default":"import {\n Button,\n Image,\n LightBox,\n LightBoxTrigger,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n \n;\n","fitScreenFalse":"import {\n Button,\n Image,\n LightBox,\n LightBoxTrigger,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n \n;\n","gallery":"$6f","imageTrigger":"import {\n Button,\n Image,\n LightBox,\n LightBoxTrigger,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n \n;\n","static":"import {\n Button,\n IconClose,\n Image,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n \n \n \n \n \n;\n"},"slugs":["04-components","overlays","light-box"],"filename":"04-components/overlays/light-box/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new 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."},"scope":{}},"examples":{"confirmOnClose":"$70","controller":"$71","default":"$72","email":"import {\n Action,\n ActionGroup,\n Button,\n Heading,\n Label,\n Text,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n E-Mail-Adresse anlegen\n \n Erstelle dir eine E-Mail-Adresse mit Postfach\n Speicherplatz.\n \n \n E-Mail-Adresse\n \n \n \n \n \n \n \n \n;\n","form":"$73","headingsDo":"import { Heading } from \"@mittwald/flow-react-components\";\n\n<>\n E-Mail-Adresse bearbeiten\n Projekt wirklich löschen?\n \n Projekt wirklich löschen? - App auswählen\n \n;\n","headingsDont":"import { Heading } from \"@mittwald/flow-react-components\";\n\n<>\n \n Bearbeite hier deine E-Mail-Adresse\n \n Projektlöschvorgang starten\n Wähle hier eine App aus\n;\n","noAction":"import {\n Action,\n ActionGroup,\n Button,\n Heading,\n Section,\n Switch,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Einstellungen\n \n \n \n \n Container Frontend anzeigen\n \n Extensions anzeigen\n \n \n \n \n \n \n \n;\n","offCanvas":"$74","size":"$75","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\n \n Organisation anlegen\n \n\n \n \n \n Eine Organisation kannst du dir wie ein Unternehmen\n vorstellen. An diesem Ort verwaltest du deine\n Mitarbeiter, Zahlungsmodalitäten und kannst deine\n Rechnungen einsehen.\n \n \n Organisationsname\n \n \n \n \n \n \n \n \n \n;\n"},"slugs":["04-components","overlays","modal"],"filename":"04-components/overlays/modal/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tooltip","description":"Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element."},"scope":{}},"examples":{"default":"import {\n Button,\n IconEdit,\n Tooltip,\n TooltipTrigger,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Bearbeiten\n;\n","delay":"import {\n Button,\n IconEdit,\n Tooltip,\n TooltipTrigger,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n Bearbeiten\n \n \n \n Name und Beschreibung ändern\n \n;\n"},"slugs":["04-components","overlays","tooltip"],"filename":"04-components/overlays/tooltip/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field-Component integriert Flows Form Controls in 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 Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n \n \n \n Name\n \n \n \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 () => {\n interface Values {\n myField: string;\n }\n const form = useForm();\n\n // Only `myField` is allowed for name prop\n const Field = typedField(form);\n\n return (\n \n \n \n Name\n \n \n \n );\n};\n"},"slugs":["04-components","react-hook-form","field"],"filename":"04-components/react-hook-form/field/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"FormRootError","gitHubComponentPath":"integrations/react-hook-form/components/FormRootError/FormRootError.tsx","description":"Die FormRootError-Component zeigt Fehler auf Form-Ebene an."},"scope":{}},"examples":{"default":"$76"},"slugs":["04-components","react-hook-form","form-root-error"],"filename":"04-components/react-hook-form/form-root-error/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form-Component gruppiert Formularfelder, nutzbar nur mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n ResetButton,\n SubmitButton,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport {\n ActionGroup,\n Label,\n Section,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n const handleSubmit = (values: Values) =>\n alert(JSON.stringify(values));\n\n return (\n \n \n \n \n Name\n \n \n \n Zurücksetzen\n Speichern\n \n \n \n );\n};\n","resetOnSubmit":"$77"},"slugs":["04-components","react-hook-form","form"],"filename":"04-components/react-hook-form/form/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"SubmitButton","gitHubComponentPath":"integrations/react-hook-form/components/SubmitButton/SubmitButton.tsx","description":"Der SubmitButton dient in Verbindung mit React Hook Form zum Absenden von Formularen."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n SubmitButton,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport {\n Align,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n const handleSubmit = (values: Values) =>\n alert(JSON.stringify(values));\n\n return (\n \n \n \n \n Name\n \n \n\n Speichern\n \n \n );\n};\n"},"slugs":["04-components","react-hook-form","submit-button"],"filename":"04-components/react-hook-form/submit-button/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern."},"scope":{}},"examples":{"default":"import { AlertBadge } from \"@mittwald/flow-react-components\";\n\nArchiviert;\n","status":"import { AlertBadge } from \"@mittwald/flow-react-components\";\n\n<>\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n Speicher voll\n \n Nicht gefunden\n \n;\n"},"slugs":["04-components","status","alert-badge"],"filename":"04-components/status/alert-badge/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"AlertText","description":"AlertText informiert über das Ergebnis einer Aktion, nah an der auslösenden Stelle."},"scope":{}},"examples":{"default":"import { AlertText } from \"@mittwald/flow-react-components\";\n\nInfo;\n","status":"import { AlertText } from \"@mittwald/flow-react-components\";\n\n<>\n Info\n Warning\n Danger\n Success\n Unavailable\n;\n"},"slugs":["04-components","status","alert-text"],"filename":"04-components/status/alert-text/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein Alert macht den User visuell hervorgehoben auf wichtige, nicht ignorierbare Informationen aufmerksam."},"scope":{}},"examples":{"default":"import {\n Alert,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","page":"import {\n Alert,\n LayoutCard,\n Heading,\n Text,\n Section,\n} from \"@mittwald/flow-react-components\";\n\n\n \n E-Mail-Adresse wurde archiviert\n \n Da deine Domain gelöscht wurde, wurde diese\n E-Mail-Adresse archiviert. Um E-Mails empfangen und\n senden zu können musst du die E-Mail-Adresse\n bearbeiten.\n \n \n \n E-Mail-Adresse\n ...\n \n \n Speicherplatz\n ...\n \n;\n","section":"import {\n Alert,\n Heading,\n LayoutCard,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n E-Mail-Adresse\n ...\n \n \n Speicherplatz\n \n Speicherplatz ist voll\n \n Der Speicherplatz deines Postfachs ist voll. Um\n wieder E-Mails erhalten zu können, kannst du der\n E-Mail-Adresse mehr Speicher zuweisen.\n \n \n ...\n \n;\n","status":"$78","with-content":"import {\n Alert,\n Button,\n Content,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n E-Mail-Empfang wurde deaktiviert\n \n Der Empfang der E-Mails für dieses Postfach ist aufgrund\n fehlerhafter MX-Records deaktiviert. Bitte setze die\n richtigen Mailserver. Bei einer Neuregistrierung einer\n Domain kann es einige Minuten dauern, bis die MX-Records\n global im DNS verfügbar sind. Die E-Mail-Adresse wird in\n diesem Fall automatisch aktiviert.\n \n \n;\n"},"slugs":["04-components","status","alert"],"filename":"04-components/status/alert/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar."},"scope":{}},"examples":{"colors":"import {\n Badge,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n \n Scope\n Value\n \n;\n","dark":"import {\n Badge,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Scope\n Value\n;\n","default":"import { Badge } from \"@mittwald/flow-react-components\";\n\nValue;\n","disabled":"import {\n Badge,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Scope\n Value\n;\n","light":"import {\n Badge,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Scope\n Value\n;\n","onClose":"import { Badge } from \"@mittwald/flow-react-components\";\n\n {\n alert(\"closed!\");\n }}\n>\n Value\n;\n","onPress":"import { Badge } from \"@mittwald/flow-react-components\";\n\n {\n alert(\"pressed!\");\n }}\n>\n Value\n;\n","scope":"import {\n Badge,\n Label,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Scope\n Value\n;\n"},"slugs":["04-components","status","badge"],"filename":"04-components/status/badge/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin."},"scope":{}},"examples":{"default":"import { CounterBadge } from \"@mittwald/flow-react-components\";\n\n;\n","high-number":"import { CounterBadge } from \"@mittwald/flow-react-components\";\n\n;\n","with-button":"import {\n Button,\n CounterBadge,\n IconNotification,\n} from \"@mittwald/flow-react-components\";\n\n;\n","without-content":"import { CounterBadge } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","status","counter-badge"],"filename":"04-components/status/counter-badge/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden."},"scope":{}},"examples":{"dark":"import { LoadingSpinner } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { LoadingSpinner } from \"@mittwald/flow-react-components\";\n\n;\n","light":"import { LoadingSpinner } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","status","loading-spinner"],"filename":"04-components/status/loading-spinner/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Der 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 () => {\n const controller = useNotificationController();\n\n return (\n \n controller.add(\n alert(\"Notification clicked\")}\n status=\"warning\"\n autoClose\n >\n No SSL certificate\n \n No SSL certificate could be issued for\n examples.de.\n \n ,\n )\n }\n >\n Trigger Notification\n \n );\n};\n","closeById":"$79","default":"import {\n Button,\n Heading,\n Notification,\n Text,\n useNotificationController,\n} from \"@mittwald/flow-react-components\";\n\nexport default () => {\n const controller = useNotificationController();\n\n return (\n \n controller.add(\n alert(\"Notification clicked\")}\n status=\"warning\"\n >\n No SSL certificate\n \n No SSL certificate could be issued for\n examples.de.\n \n ,\n )\n }\n >\n Trigger Notification\n \n );\n};\n","provider":"import { NotificationProvider } from \"@mittwald/flow-react-components\";\n\nMeine App;\n"},"slugs":["04-components","status","notification-provider"],"filename":"04-components/status/notification-provider/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 informiert User über wichtige System- oder Statusmeldungen."},"scope":{}},"examples":{"default":"import {\n Heading,\n Notification,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de{\" \"}\n wurde archiviert.\n \n;\n","status":"$7a"},"slugs":["04-components","status","notification"],"filename":"04-components/status/notification/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses als horizontalen Balken an."},"scope":{}},"examples":{"decimal":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n Stückzahl\n;\n","default":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicher\n;\n","maxValue":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicher\n;\n","segments":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicher\n;\n","size":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Größe S\n \n \n Größe M\n \n \n Größe L\n \n;\n","status":"import { ProgressBar } from \"@mittwald/flow-react-components\";\n\n<>\n \n Success\n \n \n Info\n \n \n Warning\n \n \n Danger\n \n;\n","unit":"import {\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n Speicher\n;\n"},"slugs":["04-components","status","progress-bar"],"filename":"04-components/status/progress-bar/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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, besondere Inhalte dekorativ hervorzuheben."},"scope":{}},"examples":{"backgroundImage":"import {\n AccentBox,\n ColumnLayout,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit Background Image\n \n;\n","baseColor":"$7b","brandColor":"import {\n AccentBox,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n Teal\n \n \n Violet\n \n \n Lilac\n \n \n Navy\n \n \n Green\n \n;\n","customColor":"import {\n AccentBox,\n Heading,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Tipps & Tricks für mehr Klimaschutz\n \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 \n \n Blogartikel zu mehr Nachhaltigkeit\n \n \n;\n","default":"import {\n AccentBox,\n Heading,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Hilf uns, Flow noch besser zu machen!\n \n Fehlt dir eine bestimmte Component oder etwas anderes?\n Hast du Feedback? Dann teile es uns gerne auf GitHub\n mit.\n \n \n Feedback zu Flow geben\n \n \n;\n","gradient":"import {\n AccentBox,\n Color,\n Flex,\n Heading,\n Link,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n \n mStudio Extension{\" \"}\n selber entwickeln\n \n \n \n Veröffentliche{\" \"}\n eigene Features im\n mStudio\n \n \n \n \n Contributor Landingpage\n \n \n;\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\n \n \n \n \n mStudio Extension{\" \"}\n selber entwickeln\n \n \n \n Veröffentliche{\" \"}\n eigene Features im\n mStudio\n \n \n \n \n Contributor Landingpage\n \n \n \n;\n","link":"import {\n AccentBox,\n LayoutCard,\n Link,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n Verlinkte AccentBox\n \n \n \n \n \n Verlinkte AccentBox in LayoutCard\n \n \n \n;\n"},"slugs":["04-components","structure","accent-box"],"filename":"04-components/structure/accent-box/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion blendet Content-Bereiche ein und aus und spart so Platz."},"scope":{}},"examples":{"default-expanded":"import {\n Accordion,\n Content,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import {\n Accordion,\n Content,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import {\n Accordion,\n Content,\n Label,\n} from \"@mittwald/flow-react-components\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","outline":"import {\n Accordion,\n Content,\n Heading,\n} from \"@mittwald/flow-react-components\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n"},"slugs":["04-components","structure","accordion"],"filename":"04-components/structure/accordion/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Align kombiniert Components gezielt, inklusive Anordnung und Farbanpassungen."},"scope":{}},"examples":{"default":"import {\n Align,\n Avatar,\n Initials,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Max Mustermann\n \n \n Max Mustermann\n Organisationsinhaber\n \n;\n","icon-text":"import {\n Align,\n IconDomain,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n mail.agenturserver.de\n;\n","input-button":"import {\n Align,\n Button,\n Label,\n TextField,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Weiterleitungsziel\n \n \n;\n","text-contextual-help":"import {\n Align,\n Button,\n ContextualHelp,\n ContextualHelpTrigger,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n mail.agenturserver.de\n\n \n \n \n;\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 () => {\n const List = typedList<{ text: string }>();\n\n return (\n \n \n i.text}\n >\n {(i) => (\n \n \n \n \n {i.text}\n\n \n \n Kostenlos\n \n \n \n )}\n \n \n );\n};\n"},"slugs":["04-components","structure","flex"],"filename":"04-components/structure/flex/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein einfacher Container, der mit beliebigem Inhalt gefüllt werden kann."},"scope":{}},"examples":{"default":"import { LayoutCard } from \"@mittwald/flow-react-components\";\n\nInhalt der Layout Card;\n","tab-navigation":"import {\n LayoutCard,\n TabNavigation,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Apps\n \n Container\n Domains\n E-Mails\n Backups\n \n \n \n Der Inhalt der aktiven Seite wird unterhalb der\n TabNavigation in derselben LayoutCard dargestellt.\n \n \n;\n"},"slugs":["04-components","structure","layout-card"],"filename":"04-components/structure/layout-card/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (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 dar und bietet Sortierung, Filter und Suche."},"scope":{}},"examples":{"actionGroup":"import {\n ActionGroup,\n Avatar,\n Button,\n Heading,\n IconDomain,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/04-components/structure/list/examples/domainApi\";\n\nexport default () => {\n const DomainList = typedList();\n\n return (\n domain.id}\n >\n \n \n \n \n domain.domain}\n >\n {(domain) => (\n \n \n \n \n {domain.hostname}\n {domain.type}\n \n )}\n \n \n );\n};\n","customEmptyView":"import {\n Heading,\n IconDomain,\n IllustratedMessage,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport { type Domain } from \"@/content/04-components/structure/list/examples/domainApi\";\n\nexport default () => {\n const List = typedList();\n\n const emptyView = (\n \n \n Keine Domains gefunden\n Füge neue Domains hinzu, um zu starten.\n \n );\n\n return (\n \n \n {() => null}\n \n );\n};\n","default":"$7c","emptyView":"import { typedList } from \"@mittwald/flow-react-components\";\nimport { type Domain } from \"@/content/04-components/structure/list/examples/domainApi\";\n\nexport default () => {\n const List = typedList();\n\n return (\n \n \n {() => null}\n \n );\n};\n","filter":"$7d","filterCategory":"$7e","filterDateRange":"$7f","filterGeneralCategory":"$80","item-accordion":"import {\n Avatar,\n Content,\n Heading,\n IconDomain,\n ListItemView,\n Text,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/04-components/structure/list/examples/domainApi\";\n\nexport default () => {\n const List = typedList();\n\n return (\n domain.id}\n >\n \n domain.domain}>\n {(domain) => (\n \n \n \n \n {domain.hostname}\n {domain.type}\n Mehr Inhalt\n \n )}\n \n \n );\n};\n","item-action-group":"$81","item-checkbox":"$82","item-column-layout-hidden":"$83","item-column-layout":"$84","item-content":"$85","item-link":"import {\n Avatar,\n ContextMenu,\n Heading,\n IconDomain,\n MenuItem,\n typedList,\n} from \"@mittwald/flow-react-components\";\nimport {\n type Domain,\n domains,\n} from \"@/content/04-components/structure/list/examples/domainApi\";\n\nexport default () => {\n const List = typedList();\n\n return (\n domain.id}\n >\n \n \"#\"}\n textValue={(domain) => domain.domain}\n >\n {(domain) => (\n \n \n \n \n {domain.hostname}\n\n \n Details anzeigen\n \n \n )}\n \n \n );\n};\n","loadingView":"$86","mobile":"$87","mode-list":"$88","mode-table":"$89","mode-tile":"$8a","namingDo":"$8b","namingDont":"$8c","sortingDo":"$8d","sortingDont":"$8e","summary":"$8f"},"slugs":["04-components","structure","list"],"filename":"04-components/structure/list/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new 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 gliedert Content in Teilbereiche und trennt sie durch einen Separator."},"scope":{}},"examples":{"alert-badge-dont":"$90","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\n \n \n Mein Projekt\n Deaktiviert\n \n\n \n \n \n\n \n \n Projektname\n Dolce Vita\n \n \n Short-ID\n p-lol3qe\n \n \n \n Projektdomain\n \n p-lol3qe.project.space\n \n \n \n \n \n ;\n","context-menu":"$91","default":"import {\n Heading,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Newsletter\n \n Kommende Releases, neue Features und Tipps rund um dein\n Hosting – wir bringen dir das Wichtigste in dein\n Postfach. Abonniere unseren Newsletter und bleib auf dem\n Laufenden.\n \n ;\n","hierarchy-do":"import {\n Heading,\n IconStar,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n \n Erste Schritte\n \n \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 \n Starten\n ;\n","link":"import {\n Header,\n Heading,\n Link,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Newsletter\n Zur Anmeldung\n \n \n Kommende Releases, neue Features und Tipps rund um dein\n Hosting – wir bringen dir das Wichtigste in dein\n Postfach. Abonniere unseren Newsletter und bleib auf dem\n Laufenden.\n \n ;\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\n \n \n Mein sehr langes Projekt\n Deaktiviert\n \n\n \n \n \n\n \n \n Projektname\n Dolce Vita\n \n \n Short-ID\n p-lol3qe\n \n \n \n Projektdomain\n \n p-lol3qe.project.space\n \n \n \n \n \n ;\n","multiple":"import {\n Button,\n Header,\n Heading,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n<>\n \n \n Datenbanken\n \n \n \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 \n \n \n Cronjobs\n \n Ein Cronjob ist immer fest einer App zugeordnet, du\n kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und\n löschen.\n \n \n;\n","sub-heading":"import {\n Heading,\n InlineCode,\n Label,\n LabeledValue,\n Section,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n DNS Verwaltung\n \n Da du externe Nameserver nutzt, empfehlen wir dir\n folgende Records bei deinem Provider einzutragen.\n \n A-Record\n \n IPv4-Adresse\n 12.123.123.12\n \n ;\n","switch":"import {\n Header,\n Heading,\n Section,\n Switch,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Autoresponder\n Aktivieren\n \n \n Lasse den Autoresponder für dich arbeiten. Er kann\n automatisch auf eingehende E-Mails antworten.\n \n ;\n"},"slugs":["04-components","structure","section"],"filename":"04-components/structure/section/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Ein Separator ist eine horizontale Linie, die inhaltliche Abschnitte voneinander abgrenzt."},"scope":{}},"examples":{"default":"import { Separator } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","structure","separator"],"filename":"04-components/structure/separator/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 zeigt Daten in Zeilen und Spalten und macht Einträge vergleichbar."},"scope":{}},"examples":{"default":"$92","fixed-column-widths":"import {\n InlineCode,\n Table,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Name\n Type\n Default\n \n \n \n \n color\n \n \n primary | accent | secondary | danger\n \n primary\n \n \n \n variant\n \n plain | solid | soft\n solid\n \n \n \n size\n \n m | s\n m\n \n \n;\n","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\n \n Bereich\n \n Lesen\n \n \n Schreiben\n \n \n \n \n Projekt\n \n \n \n \n \n \n \n \n ;\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\n \n Name\n Type\n Default\n Description\n \n \n \n \n size\n \n m | s\n m\n \n Lorem ipsum dolor sit amet consectetur adipisicing\n elit. Cumque eius quam quas vel voluptas, ullam\n aliquid fugit.\n \n \n \n ;\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\n \n Artikel\n Preis\n \n \n \n Webhosting (2 vCPU / 4 GB RAM)\n 32,00 €\n \n \n 20 GB Speicherplatz\n Inklusive\n \n \n 20 GB Zusatzspeicherplatz\n 2,00 €\n \n \n Gesamtpreis\n 34,00 €\n \n \n ;\n"},"slugs":["04-components","structure","table"],"filename":"04-components/structure/table/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs strukturieren verwandte Inhalte in schnell erreichbaren Ansichten."},"scope":{}},"examples":{"collapsed":"import {\n Heading,\n LayoutCard,\n Section,\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components\";\n\n\n \n SSH-Benutzer\n \n \n Mit App verbinden\n App Content\n \n \n Mit Container verbinden\n Container Content\n \n \n \n;\n","content":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit App verbinden\n App Content\n \n \n Mit Container verbinden\n Container Content\n \n;\n","default-selected":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit App verbinden\n App Content\n \n \n Mit Container verbinden\n Container Content\n \n;\n","default":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit App verbinden\n App Content\n \n \n Mit Container verbinden\n Container Content\n \n;\n","status":"import {\n AlertIcon,\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Mit App verbinden\n App Content\n \n \n \n Mit Container verbinden\n \n \n Container Content\n \n;\n"},"slugs":["04-components","structure","tabs"],"filename":"04-components/structure/tabs/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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 platziert mehrere FileCards in einem ColumnLayout."},"scope":{}},"examples":{"default":"import {\n FileCard,\n FileCardList,\n} from \"@mittwald/flow-react-components\";\n\n\n {\n console.log(\"delete\");\n }}\n />\n {\n console.log(\"delete\");\n }}\n />\n {\n console.log(\"delete\");\n }}\n />\n {\n console.log(\"delete\");\n }}\n />\n {\n console.log(\"delete\");\n }}\n />\n;\n"},"slugs":["04-components","upload","file-card-list"],"filename":"04-components/upload/file-card-list/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Die FileCard visualisiert Dateien samt relevanter Informationen."},"scope":{}},"examples":{"buttons":"import {\n FileCard,\n Button,\n IconChevronDown,\n IconChevronUp,\n} from \"@mittwald/flow-react-components\";\n\n {\n console.log(\"delete\");\n }}\n>\n \n \n;\n","contextMenu":"import {\n ContextMenu,\n FileCard,\n MenuItem,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Entfernen\n \n;\n","default":"import { FileCard } from \"@mittwald/flow-react-components\";\n\n;\n","delete":"import { FileCard } from \"@mittwald/flow-react-components\";\n\n {\n console.log(\"delete\");\n }}\n/>;\n","failed":"import {\n FileCard,\n Text,\n} from \"@mittwald/flow-react-components\";\n\n\n Datei konnte nicht hochgeladen werden\n;\n","image":"import { FileCard } from \"@mittwald/flow-react-components\";\n\n;\n","link":"import { FileCard } from \"@mittwald/flow-react-components\";\n\n;\n","progressBar":"import {\n FileCard,\n Label,\n ProgressBar,\n} from \"@mittwald/flow-react-components\";\n\n\n \n Image.png\n \n;\n"},"slugs":["04-components","upload","file-card"],"filename":"04-components/upload/file-card/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n 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":"Die FileDropZone ermöglicht das Hochladen von Dateien per Drag-and-Drop oder durch manuelle Auswahl."},"scope":{}},"examples":{"default":"import {\n Button,\n FileDropZone,\n FileField,\n Heading,\n IconUpload,\n Section,\n} from \"@mittwald/flow-react-components\";\n\n\n console.log(files)}>\n \n Datei ablegen\n \n \n \n \n ;\n","fileCardList":"$93","multiple":"import {\n Button,\n FileDropZone,\n FileField,\n Heading,\n IconUpload,\n Section,\n} from \"@mittwald/flow-react-components\";\n\n\n console.log(files)}\n >\n \n Dateien ablegen\n \n \n \n \n ;\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\n console.log(files)}\n >\n \n Bild ablegen\n \n Es sind nur Bilder vom Typ image/png erlaubt.\n \n \n \n \n \n ;\n"},"slugs":["04-components","upload","file-drop-zone"],"filename":"04-components/upload/file-drop-zone/index.mdx","anchors":[]},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {Wireframe} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!Wireframe) _missingMdxReference(\"Wireframe\", true);\n return _jsx(Wireframe, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ImageCropper","description":"Der ImageCropper schneidet ein Bild auf ein bestimmtes Format zu."},"scope":{}},"examples":{"aspect":"import { ImageCropper } from \"@mittwald/flow-react-components\";\n\n;\n","crop-shape":"import { ImageCropper } from \"@mittwald/flow-react-components\";\n\n;\n","default":"import { ImageCropper } from \"@mittwald/flow-react-components\";\n\n;\n","file-drop-zone":"$94","size":"import { ImageCropper } from \"@mittwald/flow-react-components\";\n\n;\n"},"slugs":["04-components","upload","image-cropper"],"filename":"04-components/upload/image-cropper/index.mdx","anchors":[]}]}],"$L95","$L96"]}]}]]}]}]

Property	Type	Description
`color`	`FlowWithCustomColor`Default: "blue"	The color of the element.
`children`	`ReactNode`
`className`	`string`	The elements class name.

Color

Properties

Auf dieser Seite