From 894978a4965df671940e835d3db19912fccdf2f4 Mon Sep 17 00:00:00 2001 From: mittwald <> Date: Wed, 12 Jun 2024 08:45:11 +0000 Subject: [PATCH] Update from https://github.com/mittwald/flow/commit/3269afb0479e54fad32b907a64d3126309b3ec36 --- .../01-get-started/installation.html | 22 + .../01-get-started/installation.txt | 2948 ++++++++++++++ .../01-get-started/stylesheet.html | 86 + .../01-get-started/stylesheet.txt | 3003 ++++++++++++++ .../content-guidelines/fehlermeldungen.html | 72 + .../content-guidelines/fehlermeldungen.txt | 3078 ++++++++++++++ .../03-components/actions/action-group.html | 4 + .../03-components/actions/action-group.txt | 2931 ++++++++++++++ .../03-components/actions/action.html | 4 + .../03-components/actions/action.txt | 2999 ++++++++++++++ .../03-components/actions/button.html | 4 + .../03-components/actions/button.txt | 2986 ++++++++++++++ .../03-components/actions/context-menu.html | 4 + .../03-components/actions/context-menu.txt | 2936 ++++++++++++++ .../03-components/actions/copy-button.html | 4 + .../03-components/actions/copy-button.txt | 2915 ++++++++++++++ .../03-components/content/avatar.html | 4 + .../03-components/content/avatar.txt | 2958 ++++++++++++++ .../03-components/content/heading.html | 4 + .../03-components/content/heading.txt | 2952 ++++++++++++++ .../03-components/content/icon.html | 4 + .../03-components/content/icon.txt | 3544 +++++++++++++++++ .../content/illustrated-message.html | 4 + .../content/illustrated-message.txt | 2921 ++++++++++++++ .../03-components/content/image.html | 4 + .../03-components/content/image.txt | 2915 ++++++++++++++ .../03-components/content/inline-code.html | 4 + .../03-components/content/inline-code.txt | 2915 ++++++++++++++ .../03-components/content/label.html | 4 + .../03-components/content/label.txt | 2915 ++++++++++++++ .../03-components/content/labeled-value.html | 4 + .../03-components/content/labeled-value.txt | 2931 ++++++++++++++ .../03-components/content/skeleton.html | 4 + .../03-components/content/skeleton.txt | 2944 ++++++++++++++ .../03-components/content/text.html | 4 + .../03-components/content/text.txt | 2931 ++++++++++++++ .../form-controls/checkbox-button.html | 4 + .../form-controls/checkbox-button.txt | 2915 ++++++++++++++ .../form-controls/checkbox-group.html | 4 + .../form-controls/checkbox-group.txt | 2934 ++++++++++++++ .../03-components/form-controls/checkbox.html | 4 + .../03-components/form-controls/checkbox.txt | 2926 ++++++++++++++ .../form-controls/field-react-hook-form.html | 4 + .../form-controls/field-react-hook-form.txt | 2934 ++++++++++++++ .../form-controls/form-react-hook-form.html | 4 + .../form-controls/form-react-hook-form.txt | 3004 ++++++++++++++ .../form-controls/number-field.html | 4 + .../form-controls/number-field.txt | 2936 ++++++++++++++ .../form-controls/radio-group.html | 4 + .../form-controls/radio-group.txt | 2945 ++++++++++++++ .../03-components/form-controls/select.html | 4 + .../03-components/form-controls/select.txt | 2915 ++++++++++++++ .../03-components/form-controls/slider.html | 4 + .../03-components/form-controls/slider.txt | 2925 ++++++++++++++ .../03-components/form-controls/switch.html | 4 + .../03-components/form-controls/switch.txt | 2926 ++++++++++++++ .../form-controls/text-area.html | 4 + .../03-components/form-controls/text-area.txt | 2942 ++++++++++++++ .../form-controls/text-field.html | 4 + .../form-controls/text-field.txt | 3163 +++++++++++++++ .../03-components/navigation/breadcrumb.html | 4 + .../03-components/navigation/breadcrumb.txt | 2931 ++++++++++++++ .../navigation/header-navigation.html | 4 + .../navigation/header-navigation.txt | 3032 ++++++++++++++ .../03-components/navigation/link.html | 4 + .../03-components/navigation/link.txt | 2954 ++++++++++++++ .../03-components/navigation/navigation.html | 4 + .../03-components/navigation/navigation.txt | 2936 ++++++++++++++ .../03-components/navigation/tabs.html | 4 + .../03-components/navigation/tabs.txt | 3025 ++++++++++++++ .../overlays/contextual-help.html | 4 + .../overlays/contextual-help.txt | 2915 ++++++++++++++ .../03-components/overlays/modal.html | 4 + .../03-components/overlays/modal.txt | 3089 ++++++++++++++ .../03-components/overlays/off-canvas.html | 4 + .../03-components/overlays/off-canvas.txt | 2995 ++++++++++++++ .../03-components/overlays/tooltip.html | 4 + .../03-components/overlays/tooltip.txt | 2915 ++++++++++++++ .../03-components/status/counter-label.html | 4 + .../03-components/status/counter-label.txt | 2938 ++++++++++++++ .../03-components/status/inline-alert.html | 4 + .../03-components/status/inline-alert.txt | 3012 ++++++++++++++ .../03-components/status/loading-spinner.html | 4 + .../03-components/status/loading-spinner.txt | 2915 ++++++++++++++ .../status/notification-provider.html | 4 + .../status/notification-provider.txt | 2941 ++++++++++++++ .../03-components/status/notification.html | 4 + .../03-components/status/notification.txt | 2921 ++++++++++++++ .../03-components/status/progress-bar.html | 4 + .../03-components/status/progress-bar.txt | 2931 ++++++++++++++ .../03-components/status/status-badge.html | 4 + .../03-components/status/status-badge.txt | 2921 ++++++++++++++ .../03-components/status/status-icon.html | 4 + .../03-components/status/status-icon.txt | 2930 ++++++++++++++ .../03-components/structure/accordion.html | 4 + .../03-components/structure/accordion.txt | 2924 ++++++++++++++ .../structure/column-layout.html | 4 + .../03-components/structure/column-layout.txt | 2957 ++++++++++++++ .../03-components/structure/layout-card.html | 4 + .../03-components/structure/layout-card.txt | 2915 ++++++++++++++ .../03-components/structure/list.html | 4 + .../03-components/structure/list.txt | 3231 +++++++++++++++ .../03-components/structure/section.html | 4 + .../03-components/structure/section.txt | 2995 ++++++++++++++ .../03-components/structure/separator.html | 4 + .../03-components/structure/separator.txt | 2915 ++++++++++++++ .../03-components/structure/table.html | 4 + .../03-components/structure/table.txt | 3007 ++++++++++++++ .../404.html | 4 + .../ETS2OBWAalsN2rJtXsg3m/_buildManifest.js | 1 + .../ETS2OBWAalsN2rJtXsg3m/_ssgManifest.js | 1 + .../static/chunks/275-c070d0d00f53bea8.js | 147 + .../static/chunks/31-4fef911002626fa2.js | 317 ++ .../static/chunks/734-fc347e6d309f6880.js | 1 + .../static/chunks/927-f4a39fc0a7ad0156.js | 2 + .../chunks/9b0ae93a-09800d29410c0db0.js | 1 + .../app/[...slug]/page-d973b052c47c2796.js | 1 + .../app/_not-found/page-e86454ccf5caa4e3.js | 1 + .../chunks/app/layout-7b18342ae47816df.js | 1 + .../chunks/app/page-db5b47ff48605acc.js | 1 + .../chunks/ce067a8a-5bfcac4fb1be62e9.js | 1 + .../chunks/d709487a-8b04f0f7982383f9.js | 1 + .../chunks/framework-4e4c07731c870c33.js | 33 + .../chunks/main-app-c43a649365587b3b.js | 1 + .../static/chunks/main-e1105b723503162f.js | 1 + .../chunks/pages/_app-7c075f84920e3844.js | 1 + .../chunks/pages/_error-0bd152d7dbe30a31.js | 1 + .../chunks/polyfills-78c92fac7aa8fdd8.js | 1 + .../static/chunks/webpack-53d65f1ca5571873.js | 1 + .../_next/static/css/8b4ac0b39bf237ba.css | 1 + .../_next/static/css/8fe1df7c763621d8.css | 1 + .../_next/static/css/cfcb4480d9c1b998.css | 1 + .../favicon.ico | Bin 0 -> 877 bytes .../index.html | 1 + .../index.txt | 2872 +++++++++++++ 135 files changed, 164211 insertions(+) create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/breadcrumb.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/breadcrumb.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/header-navigation.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/header-navigation.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/link.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/link.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/navigation.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/navigation.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/tabs.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/navigation/tabs.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/contextual-help.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/contextual-help.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/modal.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/modal.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/off-canvas.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/off-canvas.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/tooltip.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/overlays/tooltip.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/counter-label.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/counter-label.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/inline-alert.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/inline-alert.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/loading-spinner.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/loading-spinner.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/notification-provider.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/notification-provider.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/notification.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/notification.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/progress-bar.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/progress-bar.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/status-badge.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/status-badge.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/status-icon.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/status/status-icon.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/accordion.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/accordion.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/column-layout.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/column-layout.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/layout-card.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/layout-card.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/list.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/list.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/section.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/section.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/separator.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/separator.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/table.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/structure/table.txt create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/404.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/ETS2OBWAalsN2rJtXsg3m/_buildManifest.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/ETS2OBWAalsN2rJtXsg3m/_ssgManifest.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/275-c070d0d00f53bea8.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/31-4fef911002626fa2.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/734-fc347e6d309f6880.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/927-f4a39fc0a7ad0156.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/9b0ae93a-09800d29410c0db0.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/app/[...slug]/page-d973b052c47c2796.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/app/_not-found/page-e86454ccf5caa4e3.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/app/layout-7b18342ae47816df.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/app/page-db5b47ff48605acc.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/d709487a-8b04f0f7982383f9.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/framework-4e4c07731c870c33.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/main-app-c43a649365587b3b.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/main-e1105b723503162f.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/pages/_app-7c075f84920e3844.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/pages/_error-0bd152d7dbe30a31.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/chunks/webpack-53d65f1ca5571873.js create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/index.html create mode 100644 docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/index.txt diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.html new file mode 100644 index 0000000000..4163ef0646 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.html @@ -0,0 +1,22 @@ +Installation

Flow

beta

Get started

Installation

Willkommen in der Flow Dokumentation!
+
+

Installation der Flow React Component Library

+

Die Flow React Component Library kann mit einem Package Manager wie npm or +yarn installiert werden.

+
yarn add @mittwald/flow-react-components
+
+

Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb +diese Packages bereitgestellt.

+
+

Styles importieren

+

Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren. +Füge diese Zeile zum Einstiegspunkt deines Projektes hinzu.

+
import "@mittwald/flow-react-components/styles";
+
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.txt new file mode 100644 index 0000000000..fc9b9937f8 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/installation.txt @@ -0,0 +1,2948 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","01-get-started/installation","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","01-get-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-started/installation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +184:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Installation"}],"Willkommen in der Flow Dokumentation!","$undefined"]}],["$","$L183",null,{"mdxFile":{"mdxSource":{"compiledSource":"$184","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"}}]]}]}],"$undefined"] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Installation"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.html new file mode 100644 index 0000000000..68b257b61a --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.html @@ -0,0 +1,86 @@ +Stylesheet

Flow

beta

Stylesheet

Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das +auch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein, +wenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich +dabei an die mittwald Styling Guidelines halten willst.

+

Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet +installieren kannst und wie die Klassennamen strukturiert sind.

+
+

Installation des Standalone Stylesheets

+

Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über +NPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager +wie npm or yarn installiert werden.

+
yarn add @mittwald/flow-stylesheet
+
+
+

Styles importieren

+

Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren. +Füge diese Zeile zum Einstiegspunkt deines Projektes hinzu.

+
import "@mittwald/flow-stylesheet/css";
+
+
+

Anwendung des Stylesheets

+

Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert +sind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten, +Komponenten basiertem und leicht zu verstehendem Schema.

+
+

Generelle Klassennamen Auszeichnungen

+

Alle Klassennamen sind in Lowercase geschrieben und benutzen - um Wörter zu +trennen und -- um logische Abschnitte zu unterteilen.

+

Der erste logische Abschnitt ist immer der flow Namespace. Andere Abschnitte +könnten beispielsweise so aussehen:

+

Komponenten

+
.flow--button
+.flow--heading
+.flow--status-icon
+
+

Sub-Komponenten

+
.flow--navigation
+.flow--navigation--navigation-item
+
+

Spezialisierung: Verschiedene Varianten

+
.flow--button--primary
+.flow--inline-alert--danger
+.flow--icon--fixed-width
+
+

Spezialisierung: In einer Komposition verwendete Komponenten

+
.flow--button--icon
+.flow--inline-alert--status-icon
+
+
+

Ein Hinweis zur Spezialisierung

+

Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren, +müssen immer zusätzlich zum Basis-Klassennamen verwendet werden.

+

Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:

+
<button className="flow--button flow--button--accent">
+  Accented Button
+</button>;
+
+

Kombinierte Varianten

+
<button className="flow--button flow--button--accent flow--button--size-s">
+  Small Accented Button
+</button>;
+
+

In einer Komposition verwendete Komponenten

+

Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren +Komponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem +Icon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen +ihren Basis-Klassennamen für das grundsätzliche Styling erhalten (flow--icon), +sowie den spezialisierten Klassennamen (flow--inline-alert--status-icon) um +spezifische Styles des Inline Alerts zu erhalten.

+
import ExampleSvg from "@/content/01-get-started/stylesheet/examples/components/ExampleSvg";
+
+<aside className="flow--inline-alert">
+  <ExampleSvg className="flow--icon flow--status-icon flow--inline-alert--status-icon" />
+  <h3 className="flow--heading flow--heading--h3 flow--inline-alert--heading">
+    E-Mail Adresse wurde archiviert
+  </h3>
+  <div className="flow--inline-alert--content">
+    Da deine Domain gelöscht wurde, wurde diese
+    E-Mail-Adresse archiviert. Um E-Mails empfangen und
+    senden zu können musst du die Adresse wieder umbenennen.
+  </div>
+</aside>;
+
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.txt new file mode 100644 index 0000000000..028e7b668e --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/01-get-started/stylesheet.txt @@ -0,0 +1,3003 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","01-get-started/stylesheet","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","01-get-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-started/stylesheet","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +184:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Stylesheet"}],"$undefined","$undefined"]}],["$","$L183",null,{"mdxFile":{"mdxSource":{"compiledSource":"$184","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"}}]]}]}],"$undefined"] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Stylesheet"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.html new file mode 100644 index 0000000000..55c696c7df --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.html @@ -0,0 +1,72 @@ +Fehlermeldungen

Flow

beta

Foundations

Fehlermeldungen

Best Practices

+
    +
  • Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.
  • +
  • Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und +handlungsorientiert sind.
  • +
  • Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.
  • +
  • Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem +Umfang und ihrer Dringlichkeit.
  • +
+
+

Grundlagen

+

Kurz und hilfreich

+

Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es +gilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch, +dass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.

+
Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format +name@domain.de ein.

Don't

Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.

Do

+

Verständliche Sprache, keine Fachsprache

+

Vermeide technische Begriffe und konzentriere dich auf eine einfach +verständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist +und wie sie das Problem lösen können.

+
Fehlercode 503: Verbindung zum Server fehlgeschlagen.

Don't

Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.

Do

+

Schuldzuweisungen vermeiden

+

Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die +Fehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln, +anstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.

+
Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche +es erneut.

Don't

Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und +versuche es erneut.

Do

+

Fehler eingestehen, Verständnis erleichtern

+

Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als +"wir" und den Nutzer als "du" beziehen. So werden die Fragen "Wo ist etwas +schiefgegangen?" und "Wer muss handeln, um es zu beheben?" einfach und +verständlich beantwortet.

+
Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.

Don't

Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse +und versuche es erneut.

Do

+

Keine ungerechtfertigten Entschuldigungen

+

Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer +erscheinen lassen und vom wichtigen Teil der Nachricht ablenken. +Entschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den +Verlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des +Problems ausführen muss.

+
Es tut uns leid, wir unterstützen das Dateiformat nicht.

Don't

Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld +trägt.

Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.

Do

Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.

+

Wahrscheinlichsten Fehler nennen

+

Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben +ist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben, +wie der wahrscheinlichste Grund zu beheben ist.

+
Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle +sicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und +ein Sonderzeichen enthält.

Don't

Dein Passwort muss mindestens 8 Zeichen enthalten.

Do

+

Nicht zu spezifisch

+

Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist +es nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder +Ordner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der +Benutzeroberfläche finden kann.

+
Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende +eine Datei vom Typ XY.

Don't

Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.

Do

+

Aktiv schreiben

+

Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.

+
Es werden nur Dateien vom Typ XY unterstützt.

Don't

Wir unterstützen nur Dateien vom Typ XY.

Do

+

Positiv formulieren

+

Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte +Begriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...) +zu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes +getan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für +die es keine direkte Lösung gibt, nicht immer möglich ist.

+
Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.

Don't

Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte +versuche es erneut.

Do

\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.txt new file mode 100644 index 0000000000..649b9e8d80 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/02-foundations/content-guidelines/fehlermeldungen.txt @@ -0,0 +1,3078 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","02-foundations/content-guidelines/fehlermeldungen","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","c"],{"children":["__PAGE__?{\"slug\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +184:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Fehlermeldungen"}],"$undefined","$undefined"]}],["$","$L183",null,{"mdxFile":{"mdxSource":{"compiledSource":"$184","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"}}]]}]}],"$undefined"] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Fehlermeldungen"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.html new file mode 100644 index 0000000000..b1cfeb2a8b --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.html @@ -0,0 +1,4 @@ +ActionGroup

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.txt new file mode 100644 index 0000000000..a1500eb831 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action-group.txt @@ -0,0 +1,2931 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/actions/action-group","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/actions/action-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/action-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T65c,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Danger" + }), "\n", _jsx(LiveCodeEditor, { + example: "danger", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Info" + }), "\n", _jsx(LiveCodeEditor, { + example: "info", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Zusätzlicher Secondary Button" + }), "\n", _jsx(LiveCodeEditor, { + example: "additionalSecondary", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"ActionGroup"}],"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"ActionGroup"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.html new file mode 100644 index 0000000000..db54a73898 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.html @@ -0,0 +1,4 @@ +Action

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.txt new file mode 100644 index 0000000000..59efa52da5 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/action.txt @@ -0,0 +1,2999 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/actions/action","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/actions/action","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/action","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +189:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +186:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +18a:T841,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Pending" + }), "\n", _jsxs(_components.p, { + children: ["Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert wird der\n", _jsx(_components.code, { + children: "pending" + }), " State angezeigt."] + }), "\n", _jsx(LiveCodeEditor, { + example: "longAction", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Feedback" + }), "\n", _jsx(LiveCodeEditor, { + example: "feedback", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Bestätigungs-Dialog" + }), "\n", _jsxs(_components.p, { + children: ["Beinhaltet eine Action ein Modal mit ", _jsx(_components.code, { + children: "slot=\"actionConfirm\"" + }), ", wird dieses Modal\nfür die Bestätigung der Action angezeigt."] + }), "\n", _jsx(LiveCodeEditor, { + example: "confirmation", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +18b:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Action"}],"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$186","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L187",null,{"children":[["$","$L188",null,{"children":[["$","$L189",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$18a","frontmatter":{},"scope":{}},"examples":{"confirmation":"$18b","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Action"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.html new file mode 100644 index 0000000000..0de0708534 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.html @@ -0,0 +1,4 @@ +Button

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.txt new file mode 100644 index 0000000000..449b7c952f --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/button.txt @@ -0,0 +1,2986 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/actions/button","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/actions/button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:Tec7,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsxs(_components.p, { + children: ["Benutze das ", _jsx(_components.code, { + children: "onPress" + }), " Property um die Interaktion mit Maus, Keyboard oder Touch\nzu ermöglichen."] + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Verschiedene Farbvarianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "colors", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Plain Variante" + }), "\n", _jsx(LiveCodeEditor, { + example: "plain", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Soft Variante" + }), "\n", _jsx(LiveCodeEditor, { + example: "soft", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Icon" + }), "\n", _jsxs(_components.p, { + children: ["Benutze die ", _jsx(_components.code, { + children: "" + }), " Komponente in einem ", _jsx(_components.code, { + children: "\n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Button"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.html new file mode 100644 index 0000000000..d59c6117f4 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.html @@ -0,0 +1,4 @@ +ContextMenu

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.txt new file mode 100644 index 0000000000..dd3cd7c16a --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/context-menu.txt @@ -0,0 +1,2936 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/actions/context-menu","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/actions/context-menu","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"context-menu\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/context-menu","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T71d,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Einfach-Auswahl" + }), "\n", _jsx(LiveCodeEditor, { + example: "single-select", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mehrfach-Auswahl" + }), "\n", _jsx(LiveCodeEditor, { + example: "multi-select", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Icon" + }), "\n", _jsx(LiveCodeEditor, { + example: "icon", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Separator" + }), "\n", _jsx(LiveCodeEditor, { + example: "separator", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"ContextMenu"}],"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"ContextMenu"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.html new file mode 100644 index 0000000000..8592768a58 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.html @@ -0,0 +1,4 @@ +CopyButton

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.txt new file mode 100644 index 0000000000..5f5a438192 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/actions/copy-button.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/actions/copy-button","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/actions/copy-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"copy-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/copy-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"CopyButton"}],"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"CopyButton"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.html new file mode 100644 index 0000000000..eac50c6950 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.html @@ -0,0 +1,4 @@ +Avatar

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.txt new file mode 100644 index 0000000000..226f524401 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/avatar.txt @@ -0,0 +1,2958 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/avatar","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/avatar","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"avatar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/avatar","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:Tb4b,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Mit Initialen" + }), "\n", _jsxs(_components.p, { + children: ["Die Initialen werden automatisch aus dem Text generiert, welcher der\n", _jsx(_components.code, { + children: "" + }), " Komponente mitgegeben wird."] + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Bild" + }), "\n", _jsxs(_components.p, { + children: ["Benutze ein ", _jsx(_components.code, { + children: "" + }), " im ", _jsx(_components.code, { + children: "" + }), " um ein Profilbild anzuzeigen."] + }), "\n", _jsx(LiveCodeEditor, { + example: "image", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Icon" + }), "\n", _jsxs(_components.p, { + children: ["Ein ", _jsx(_components.code, { + children: "" + }), " kann innerhalb eines ", _jsx(_components.code, { + children: "" + }), " verwendet werden."] + }), "\n", _jsx(LiveCodeEditor, { + example: "icon", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Größen" + }), "\n", _jsx(LiveCodeEditor, { + example: "sizes", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Farbvarianten" + }), "\n", _jsxs(_components.p, { + children: ["Die Farbe hängt von den jeweiligen Children der Komponente ab, kann aber über\ndas Property ", _jsx(_components.code, { + children: "variant" + }), " überschrieben werden um eine bestimmte Farbvariante zu\nerhalten. Sie dient dazu für Abwechslung in den angezeigten Avataren zu sorgen."] + }), "\n", _jsx(LiveCodeEditor, { + example: "colors", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Avatar"}],"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Avatar"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.html new file mode 100644 index 0000000000..78dae2582d --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.html @@ -0,0 +1,4 @@ +Heading

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.txt new file mode 100644 index 0000000000..c383762a33 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/heading.txt @@ -0,0 +1,2952 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/heading","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/heading","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T92a,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Level" + }), "\n", _jsx(LiveCodeEditor, { + example: "levels", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Optisches Level" + }), "\n", _jsxs(_components.p, { + children: ["Über das Property ", _jsx(_components.code, { + children: "levelVisual" + }), " kann die Heading so verändert werden, dass sie\noptisch einem anderen Level entspricht."] + }), "\n", _jsx(LiveCodeEditor, { + example: "level-visual", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Icon" + }), "\n", _jsx(LiveCodeEditor, { + example: "icon", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Static Colors" + }), "\n", _jsx(_components.h3, { + children: "Dark" + }), "\n", _jsx(LiveCodeEditor, { + example: "dark", + lightBackground: true, + editorCollapsed: true + }), "\n", _jsx(_components.h3, { + children: "Light" + }), "\n", _jsx(LiveCodeEditor, { + example: "light", + darkBackground: true, + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Heading"}],"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Heading"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.html new file mode 100644 index 0000000000..46510b7826 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.html @@ -0,0 +1,4 @@ +Icon

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.txt new file mode 100644 index 0000000000..0a613636c4 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/icon.txt @@ -0,0 +1,3544 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/icon","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/icon","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/icon","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +189:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +18a:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +186:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +187:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +18b:Ta7a,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, { + children: "Mit Tabler Icon" + }), "\n", _jsx(LiveCodeEditor, { + example: "tabler", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit SVG" + }), "\n", _jsx(LiveCodeEditor, { + example: "svg", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit SVG string" + }), "\n", _jsx(LiveCodeEditor, { + example: "svg-string", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Farben" + }), "\n", _jsx(_components.p, { + children: "Wenn das SVG Farben unterstützt, kann es per CSS eingefärbt werden." + }), "\n", _jsx(LiveCodeEditor, { + example: "coloring", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Größen" + }), "\n", _jsx(LiveCodeEditor, { + example: "sizes", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Verfügbare Icons" + }), "\n", _jsx(_components.h3, { + children: "Descriptive" + }), "\n", _jsx(LiveCodeEditor, { + example: "descriptive", + editorCollapsed: true + }), "\n", _jsx(_components.h3, { + children: "Functional" + }), "\n", _jsx(LiveCodeEditor, { + example: "functional", + editorCollapsed: true + }), "\n", _jsx(_components.h3, { + children: "Status" + }), "\n", _jsx(LiveCodeEditor, { + example: "states", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +18c:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +18d:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Icon"}],"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$186","functional":"$187","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L188",null,{"children":[["$","$L189",null,{"children":[["$","$L18a",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$18b","frontmatter":{},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$18c","functional":"$18d","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Icon"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.html new file mode 100644 index 0000000000..95165ace4d --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.html @@ -0,0 +1,4 @@ +IllustratedMessage

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.txt new file mode 100644 index 0000000000..5c5d87c8d1 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/illustrated-message.txt @@ -0,0 +1,2921 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/illustrated-message","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/illustrated-message","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"illustrated-message\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/illustrated-message","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T4d8,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Negative Variante" + }), "\n", _jsx(LiveCodeEditor, { + example: "negative", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"IllustratedMessage"}],"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"IllustratedMessage"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.html new file mode 100644 index 0000000000..dceda6d2d5 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.html @@ -0,0 +1,4 @@ +Image

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.txt new file mode 100644 index 0000000000..b8e055f22a --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/image.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/image","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/image","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Image"}],"Mit der Image-Komponente können Bilder angezeigt werden.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Image"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.html new file mode 100644 index 0000000000..9c9289191e --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.html @@ -0,0 +1,4 @@ +InlineCode

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.txt new file mode 100644 index 0000000000..8013dd88d9 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/inline-code.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/inline-code","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/inline-code","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"InlineCode"}],"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"InlineCode"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.html new file mode 100644 index 0000000000..0be86ba643 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.html @@ -0,0 +1,4 @@ +Label

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.txt new file mode 100644 index 0000000000..6c9445f13b --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/label.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/label","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/label","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Label"}],"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Label"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.html new file mode 100644 index 0000000000..09f9774c0e --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.html @@ -0,0 +1,4 @@ +LabeledValue

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.txt new file mode 100644 index 0000000000..bca4793bab --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/labeled-value.txt @@ -0,0 +1,2931 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/labeled-value","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/labeled-value","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"labeled-value\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/labeled-value","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T655,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit CopyButton" + }), "\n", _jsx(LiveCodeEditor, { + example: "copy-button", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Link" + }), "\n", _jsx(LiveCodeEditor, { + example: "link", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit InlineCode" + }), "\n", _jsx(LiveCodeEditor, { + example: "inline-code", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"LabeledValue"}],"Ein LabeledValue zeigt eine Information mit einem Label an.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"LabeledValue"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.html new file mode 100644 index 0000000000..241e9f841e --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.html @@ -0,0 +1,4 @@ +Skeleton

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.txt new file mode 100644 index 0000000000..b34551f9d4 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/skeleton.txt @@ -0,0 +1,2944 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/skeleton","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/skeleton","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"skeleton\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/skeleton","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T941,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + a: "a", + code: "code", + h2: "h2", + hr: "hr", + p: "p", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Benutzerdefinierte Größe" + }), "\n", _jsx(LiveCodeEditor, { + example: "custom-size", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Accessibility" + }), "\n", _jsxs(_components.p, { + children: ["Das Skeleton soll von Screenreadern ignoriert werden und enthält deswegen das\nProperty ", _jsx(_components.code, { + children: "aria-hidden" + }), "."] + }), "\n", _jsxs(_components.p, { + children: ["Die Accessibility eines Ladezustands wird ", _jsx(_components.strong, { + children: "nicht" + }), " vom Skeleton geregelt."] + }), "\n", _jsxs(_components.p, { + children: ["Um für den Screenreader erkenntlich zu machen, dass ein Inhalt fertig geladen\nhat sollte dieser im Ladezustand das Property ", _jsx(_components.code, { + children: "aria-busy" + }), ", welches auf ", _jsx(_components.code, { + children: "false" + }), "\ngesetzt wird, wenn fertig geladen wurde. (s.\n", _jsx(_components.a, { + href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy", + children: "MDN" + }), ")"] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Skeleton"}],"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Skeleton"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.html new file mode 100644 index 0000000000..6911345c42 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.html @@ -0,0 +1,4 @@ +Text

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.txt new file mode 100644 index 0000000000..2d1e901402 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/content/text.txt @@ -0,0 +1,2931 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/content/text","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/content/text","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"text\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/content/text","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T70c,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit emulateBoldWidth" + }), "\n", _jsxs(_components.p, { + children: ["Benutze das ", _jsx(_components.code, { + children: "emulateBoldWidth" + }), " Property, wenn dein Text immer die Breite haben\nsoll, die er mit ", _jsx(_components.code, { + children: "font-weight: bold" + }), " haben würde. Das ist beispielsweise in\nhorizontalen Navigationen wichtig, wenn der aktive Menüpunkt ", _jsx(_components.code, { + children: "bold" + }), " dargestellt\nwird, um ein springen der Menüpunkte zu vermeiden."] + }), "\n", _jsx(LiveCodeEditor, { + example: "emulateBoldWidth", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Text"}],"Die Text-Komponente wird verwendet, um Texte zu gruppieren.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Text"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.html new file mode 100644 index 0000000000..b3cb4fff2e --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.html @@ -0,0 +1,4 @@ +CheckboxButton

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.txt new file mode 100644 index 0000000000..67aa98d1ed --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-button.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/checkbox-button","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/checkbox-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/checkbox-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"CheckboxButton"}],"Der CheckboxButton verhält sich wie eine Checkbox.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"CheckboxButton"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.html new file mode 100644 index 0000000000..fb5521d8aa --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.html @@ -0,0 +1,4 @@ +CheckboxGroup

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.txt new file mode 100644 index 0000000000..d5cff8eaad --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox-group.txt @@ -0,0 +1,2934 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/checkbox-group","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/checkbox-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/checkbox-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T6de,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Checkbox Buttons" + }), "\n", _jsx(LiveCodeEditor, { + example: "buttons", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit benutzerdefinierten Spalten" + }), "\n", _jsxs(_components.p, { + children: ["Die ", _jsx(_components.code, { + children: "CheckboxGroup" + }), " verwendet das ", _jsx(_components.code, { + children: "ColumnLayout" + }), " um eine Anpassung der Spalten\nzu ermöglichen."] + }), "\n", _jsx(LiveCodeEditor, { + example: "customColumns", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"CheckboxGroup"}],"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"CheckboxGroup"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.html new file mode 100644 index 0000000000..2c2dd5be6b --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.html @@ -0,0 +1,4 @@ +Checkbox

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.txt new file mode 100644 index 0000000000..ba2a898e09 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/checkbox.txt @@ -0,0 +1,2926 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/checkbox","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/checkbox","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/checkbox","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T597,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Disabled" + }), "\n", _jsx(LiveCodeEditor, { + example: "disabled", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Indeterminated" + }), "\n", _jsx(LiveCodeEditor, { + example: "indeterminated", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Checkbox"}],"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Checkbox"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.html new file mode 100644 index 0000000000..2015ab1890 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.html @@ -0,0 +1,4 @@ +Field (React Hook Form)

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.txt new file mode 100644 index 0000000000..2ecf07a8a6 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/field-react-hook-form.txt @@ -0,0 +1,2934 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/field-react-hook-form","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/field-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/field-react-hook-form","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T785,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + a: "a", + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsxs(_components.p, { + children: ["Die Field Komponente verwendet die gleichen Properties (ausschließlich ", _jsx(_components.code, { + children: "render" + }), ")\nwie die\n", _jsx(_components.a, { + href: "https://www.react-hook-form.com/api/usecontroller/controller/", + children: "Controller Komponente" + }), "\nvon React Hook Form."] + }), "\n", _jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Typed Field" + }), "\n", _jsxs(_components.p, { + children: ["Die ", _jsx(_components.code, { + children: "typedField(form)" + }), " Factory erzeugt eine auf den Type der jeweilige Form\nangepasste Field Komponente. So führen z.B. unbekannte Feld-Namen zu einem\nTypeScript-Fehler."] + }), "\n", _jsx(LiveCodeEditor, { + example: "typed-field" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Field (React Hook Form)"}],"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Field/Field.tsx","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Field (React Hook Form)"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.html new file mode 100644 index 0000000000..a9e069ab80 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.html @@ -0,0 +1,4 @@ +Form (React Hook Form)

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.txt new file mode 100644 index 0000000000..3457b96450 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/form-react-hook-form.txt @@ -0,0 +1,3004 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/form-react-hook-form","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/form-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/form-react-hook-form","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +189:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +186:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +18a:T433,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +18b:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Form (React Hook Form)"}],"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Form/Form.tsx","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$186"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L187",null,{"children":[["$","$L188",null,{"children":[["$","$L189",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$18a","frontmatter":{},"scope":{}},"examples":{"default":"$18b"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Form (React Hook Form)"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.html new file mode 100644 index 0000000000..4a0ec50de7 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.html @@ -0,0 +1,4 @@ +NumberField

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.txt new file mode 100644 index 0000000000..3ac179db45 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/number-field.txt @@ -0,0 +1,2936 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/number-field","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/number-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"number-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/number-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T700,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Disabled" + }), "\n", _jsx(LiveCodeEditor, { + example: "disabled", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Required" + }), "\n", _jsx(LiveCodeEditor, { + example: "required", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Invalid" + }), "\n", _jsx(LiveCodeEditor, { + example: "invalid", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Einheit" + }), "\n", _jsx(LiveCodeEditor, { + example: "unit", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"NumberField"}],"Das NumberField dient der Eingabe von Zahlen.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"NumberField"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.html new file mode 100644 index 0000000000..401c28f442 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.html @@ -0,0 +1,4 @@ +RadioGroup

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.txt new file mode 100644 index 0000000000..0dd56af6fd --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/radio-group.txt @@ -0,0 +1,2945 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/radio-group","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/radio-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"radio-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/radio-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T858,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Radio Buttons" + }), "\n", _jsx(LiveCodeEditor, { + example: "buttons", + editorCollapsed: true + }), "\n", _jsx(_components.h3, { + children: "Mit zusätzlichem Inhalt" + }), "\n", _jsx(LiveCodeEditor, { + example: "content", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit benutzerdefinierten Spalten" + }), "\n", _jsxs(_components.p, { + children: ["Die ", _jsx(_components.code, { + children: "RadioGroup" + }), " verwendet das ", _jsx(_components.code, { + children: "ColumnLayout" + }), " um eine Anpassung der Spalten zu\nermöglichen."] + }), "\n", _jsx(LiveCodeEditor, { + example: "customColumns", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Segmented Variante" + }), "\n", _jsx(LiveCodeEditor, { + example: "segmented", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"RadioGroup"}],"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"RadioGroup"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.html new file mode 100644 index 0000000000..17b414dc00 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.html @@ -0,0 +1,4 @@ +Select

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.txt new file mode 100644 index 0000000000..ebbcac4d09 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/select.txt @@ -0,0 +1,2915 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/select","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/select","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"select\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/select","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T405,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Select"}],"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Select"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.html new file mode 100644 index 0000000000..4a06c4db98 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.html @@ -0,0 +1,4 @@ +Slider

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.txt new file mode 100644 index 0000000000..fdcf49746c --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/slider.txt @@ -0,0 +1,2925 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/slider","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/slider","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"slider\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/slider","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T66a,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + a: "a", + code: "code", + h2: "h2", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsxs(_components.p, { + children: ["Dem Slider kann optional ein Min-, Max- und Default-Wert, sowie die Step-Größe\nmitgegeben werden. Der Default-Wert kann über das Property ", _jsx(_components.code, { + children: "showInitialMarker" + }), "\nauf dem Slider markiert werden. Außerdem werden diverse Formate und Einheiten\nunterstützt (s.\n", _jsx(_components.a, { + href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat", + children: "Intel.NumberFormat" + }), "\n)"] + }), "\n", _jsx(LiveCodeEditor, {})] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Slider"}],"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Slider"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.html new file mode 100644 index 0000000000..07ed680c8b --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.html @@ -0,0 +1,4 @@ +Switch

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.txt new file mode 100644 index 0000000000..00d8c2db1d --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/switch.txt @@ -0,0 +1,2926 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/switch","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/switch","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"switch\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/switch","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T597,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + hr: "hr", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Mit Label vorne" + }), "\n", _jsx(LiveCodeEditor, { + example: "leading-label", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Disabled" + }), "\n", _jsx(LiveCodeEditor, { + example: "disabled", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"Switch"}],"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Switch"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.html new file mode 100644 index 0000000000..16ff6fe292 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.html @@ -0,0 +1,4 @@ +TextArea

Flow

beta
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.txt new file mode 100644 index 0000000000..e2812cbf88 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-area.txt @@ -0,0 +1,2942 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/text-area","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/text-area","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-area\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/text-area","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T84c,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Beispiel" + }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Disabled" + }), "\n", _jsx(LiveCodeEditor, { + example: "disabled", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Required" + }), "\n", _jsx(LiveCodeEditor, { + example: "required", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Invalid" + }), "\n", _jsx(LiveCodeEditor, { + example: "invalid", + editorCollapsed: true + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Character Count" + }), "\n", _jsxs(_components.p, { + children: ["Über das ", _jsx(_components.code, { + children: "showCharacterCount" + }), " Property wird eine FieldDescription hinzugefügt,\ndie aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl\nanzeigt."] + }), "\n", _jsx(LiveCodeEditor, { + example: "characterCount", + editorCollapsed: true + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2:[["$","$L181",null,{"children":["$","$L182",null,{"m":[1,1],"children":[["$","$L27",null,{"children":[["$","$Lb",null,{"level":1,"children":"TextArea"}],"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.",["$","$L183",null,{"href":"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea","children":["GitHub",["$","$L184",null,{}]]}]]}],["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"}}]]}]}],["$","$L181",null,{"children":["$","$L186",null,{"children":[["$","$L187",null,{"children":[["$","$L188",null,{"children":"Overview"}],["$","$L27",null,{"children":["$","$L185",null,{"mdxFile":{"mdxSource":{"compiledSource":"$189","frontmatter":{},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/overview.mdx"}}]}]]}],"$undefined","$undefined"]}]}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"TextArea"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/favicon.ico","type":"image/x-icon","sizes":"48x48"}]] +1:null diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.html b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.html new file mode 100644 index 0000000000..6e2abb27cc --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.html @@ -0,0 +1,4 @@ +TextField

Flow

beta

TextField

Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.GitHub
Beginnt mit https://
\ No newline at end of file diff --git a/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.txt b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.txt new file mode 100644 index 0000000000..d7f41bfe96 --- /dev/null +++ b/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/03-components/form-controls/text-field.txt @@ -0,0 +1,3163 @@ +3:I[68648,[],""] +5:I[91385,[],""] +4:["slug","03-components/form-controls/text-field","c"] +0:["ETS2OBWAalsN2rJtXsg3m",[[["",{"children":[["slug","03-components/form-controls/text-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/text-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/501-listitem-use-the-wrong-slot-if-the-content-slot-is-used/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]] +8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"LinkProvider"] +9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"NotificationProvider"] +a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMittwald"] +b:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +c:I[25325,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +d:I[28132,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +20:I[47145,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"HeaderNavigation"] +21:I[3710,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Content"] +22:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvasTrigger"] +23:I[18026,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"Button"] +24:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconMenu"] +25:I[73404,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"OffCanvas"] +26:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Heading"] +27:I[64580,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Section"] +148:I[5621,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-4fef911002626fa2.js","734","static/chunks/734-fc347e6d309f6880.js","185","static/chunks/app/layout-7b18342ae47816df.js"],"default"] +180:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +181:I[69947,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"LayoutCard"] +182:I[37393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"ColumnLayout"] +183:I[48357,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Link"] +184:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"IconExternalLink"] +185:I[17072,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"default"] +186:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tabs"] +187:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"Tab"] +188:I[31393,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-4fef911002626fa2.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-fc347e6d309f6880.js","877","static/chunks/app/%5B...slug%5D/page-d973b052c47c2796.js"],"TabTitle"] +e:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +10:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +11:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +12:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +13:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +14:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +15:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +16:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +17:T5b3,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +18:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +19:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +1a:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +1b:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1c:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1d:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +1e:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +1f:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +29:Tbd5,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {Content, Heading, InlineAlert} = _components; + if (!Content) _missingMdxReference("Content", true); + if (!Heading) _missingMdxReference("Heading", true); + if (!InlineAlert) _missingMdxReference("InlineAlert", true); + return _jsxs(_Fragment, { + children: [_jsxs(InlineAlert, { + children: [_jsx(Heading, { + children: "Hinweis zu frühem Entwicklungsstand und Stabilität" + }), _jsx(Content, { + children: _jsxs(_components.p, { + children: ["Dieses Projekt befindet sich in einer ", _jsx(_components.strong, { + children: "frühen Entwicklungsphase" + }), " weswegen\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\nFeedback zum aktuellen Entwicklungsstand!"] + }) + })] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation der Flow React Component Library" + }), "\n", _jsxs(_components.p, { + children: ["Die Flow React Component Library kann mit einem Package Manager wie ", _jsx(_components.code, { + children: "npm" + }), " or\n", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + className: "language-shell", + children: "yarn add @mittwald/flow-react-components\n" + }) + }), "\n", _jsx(_components.p, { + children: "Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\ndiese Packages bereitgestellt." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-react-components/styles\";\n" + }) + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +2a:{"description":"Willkommen in der Flow Dokumentation!"} +2b:{} +28:{"compiledSource":"$29","frontmatter":"$2a","scope":"$2b"} +2c:{} +2d:["01-get-started","installation"] +2f:T1884,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + code: "code", + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + p: "p", + pre: "pre", + strong: "strong", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.p, { + children: "Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\ndabei an die mittwald Styling Guidelines halten willst." + }), "\n", _jsx(_components.p, { + children: "Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\ninstallieren kannst und wie die Klassennamen strukturiert sind." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Installation des Standalone Stylesheets" + }), "\n", _jsxs(_components.p, { + children: ["Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\nwie ", _jsx(_components.code, { + children: "npm" + }), " or ", _jsx(_components.code, { + children: "yarn" + }), " installiert werden."] + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "yarn add @mittwald/flow-stylesheet\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Styles importieren" + }), "\n", _jsx(_components.p, { + children: "Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu." + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: "import \"@mittwald/flow-stylesheet/css\";\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Anwendung des Stylesheets" + }), "\n", _jsx(_components.p, { + children: "Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponenten basiertem und leicht zu verstehendem Schema." + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Generelle Klassennamen Auszeichnungen" + }), "\n", _jsxs(_components.p, { + children: ["Alle Klassennamen sind in Lowercase geschrieben und benutzen ", _jsx(_components.code, { + children: "-" + }), " um Wörter zu\ntrennen und ", _jsx(_components.code, { + children: "--" + }), " um logische Abschnitte zu unterteilen."] + }), "\n", _jsxs(_components.p, { + children: ["Der erste logische Abschnitt ist immer der ", _jsx(_components.code, { + children: "flow" + }), " Namespace. Andere Abschnitte\nkönnten beispielsweise so aussehen:"] + }), "\n", _jsx(_components.h4, { + children: "Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button\n.flow--heading\n.flow--status-icon\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Sub-Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--navigation\n.flow--navigation--navigation-item\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: Verschiedene Varianten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--primary\n.flow--inline-alert--danger\n.flow--icon--fixed-width\n" + }) + }), "\n", _jsx(_components.h4, { + children: "Spezialisierung: In einer Komposition verwendete Komponenten" + }), "\n", _jsx(_components.pre, { + children: _jsx(_components.code, { + children: ".flow--button--icon\n.flow--inline-alert--status-icon\n" + }) + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { + children: "Ein Hinweis zur Spezialisierung" + }), "\n", _jsxs(_components.p, { + children: ["Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\nmüssen immer ", _jsx(_components.strong, { + children: "zusätzlich zum Basis-Klassennamen" + }), " verwendet werden."] + }), "\n", _jsx(_components.p, { + children: "Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:" + }), "\n", _jsx(LiveCodeEditor, { + example: "variants" + }), "\n", _jsx(_components.h4, { + children: "Kombinierte Varianten" + }), "\n", _jsx(LiveCodeEditor, { + example: "multiple-variants" + }), "\n", _jsx(_components.h4, { + children: "In einer Komposition verwendete Komponenten" + }), "\n", _jsxs(_components.p, { + children: ["Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (", _jsx(_components.code, { + children: "flow--icon" + }), "),\nsowie den spezialisierten Klassennamen (", _jsx(_components.code, { + children: "flow--inline-alert--status-icon" + }), ") um\nspezifische Styles des Inline Alerts zu erhalten."] + }), "\n", _jsx(LiveCodeEditor, { + example: "composition" + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +30:{} +31:{} +2e:{"compiledSource":"$2f","frontmatter":"$30","scope":"$31"} +32:{"composition":"import ExampleSvg from \"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"} +33:["01-get-started","stylesheet"] +35:T265e,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + h2: "h2", + h3: "h3", + h4: "h4", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {Do, DoAndDont, Dont} = _components; + if (!Do) _missingMdxReference("Do", true); + if (!DoAndDont) _missingMdxReference("DoAndDont", true); + if (!Dont) _missingMdxReference("Dont", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Best Practices" + }), "\n", _jsxs(_components.ul, { + children: ["\n", _jsx(_components.li, { + children: "Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems." + }), "\n", _jsx(_components.li, { + children: "Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\nhandlungsorientiert sind." + }), "\n", _jsx(_components.li, { + children: "Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren." + }), "\n", _jsx(_components.li, { + children: "Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\nUmfang und ihrer Dringlichkeit." + }), "\n"] + }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { + children: "Grundlagen" + }), "\n", _jsx(_components.h3, { + children: "Kurz und hilfreich" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\nname@domain.de ein.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Verständliche Sprache, keine Fachsprache" + }), "\n", _jsx(_components.p, { + children: "Vermeide technische Begriffe und konzentriere dich auf eine einfach\nverständliche Sprache. Nutzer verstehen so am ehesten, was schief gelaufen ist\nund wie sie das Problem lösen können." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehlercode 503: Verbindung zum Server fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Schuldzuweisungen vermeiden" + }), "\n", _jsx(_components.p, { + children: "Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\nes erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Fehler eingestehen, Verständnis erleichtern" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\n\"wir\" und den Nutzer als \"du\" beziehen. So werden die Fragen \"Wo ist etwas\nschiefgegangen?\" und \"Wer muss handeln, um es zu beheben?\" einfach und\nverständlich beantwortet." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\nund versuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Keine ungerechtfertigten Entschuldigungen" + }), "\n", _jsx(_components.p, { + children: "Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\nProblems ausführen muss." + }), "\n", _jsxs(DoAndDont, { + children: [_jsxs(Dont, { + exampleText: "Es tut uns leid, wir unterstützen das Dateiformat nicht.", + children: [_jsx(_components.h4, { + children: "Don't" + }), _jsx(_components.p, { + children: "Entschuldige dicht nicht für Kleinigkeiten oder wenn das System keine Schuld\nträgt." + })] + }), _jsxs(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: [_jsx(_components.h4, { + children: "Do" + }), _jsx(_components.p, { + children: "Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten." + })] + })] + }), "\n", _jsx(_components.h3, { + children: "Wahrscheinlichsten Fehler nennen" + }), "\n", _jsx(_components.p, { + children: "Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\nwie der wahrscheinlichste Grund zu beheben ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\nein Sonderzeichen enthält.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Dein Passwort muss mindestens 8 Zeichen enthalten.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Nicht zu spezifisch" + }), "\n", _jsx(_components.p, { + children: "Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\nBenutzeroberfläche finden kann." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\neine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Aktiv schreiben" + }), "\n", _jsx(_components.p, { + children: "Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Es werden nur Dateien vom Typ XY unterstützt.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Wir unterstützen nur Dateien vom Typ XY.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + }), "\n", _jsx(_components.h3, { + children: "Positiv formulieren" + }), "\n", _jsx(_components.p, { + children: "Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\ndie es keine direkte Lösung gibt, nicht immer möglich ist." + }), "\n", _jsxs(DoAndDont, { + children: [_jsx(Dont, { + exampleText: "Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.", + children: _jsx(_components.h4, { + children: "Don't" + }) + }), _jsx(Do, { + exampleText: "Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\nversuche es erneut.", + children: _jsx(_components.h4, { + children: "Do" + }) + })] + })] + }); +} +function MDXContent(props = {}) { + const {wrapper: MDXLayout} = { + ..._provideComponents(), + ...props.components + }; + return MDXLayout ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +return { + default: MDXContent +}; +function _missingMdxReference(id, component) { + throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); +} +36:{} +37:{} +34:{"compiledSource":"$35","frontmatter":"$36","scope":"$37"} +38:{} +39:["02-foundations","content-guidelines","fehlermeldungen"] +3b:{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."} +3c:{} +3a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$3b","scope":"$3c"} +3d:{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"} +3e:["03-components","actions","action-group"] +40:{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."} +41:{} +3f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$40","scope":"$41"} +43:T412,import Button from "@mittwald/flow-react-components/Button"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; +import { Modal } from "@mittwald/flow-react-components/Modal"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Content } from "@mittwald/flow-react-components/Content"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; + + + + Projekt löschen + + Das Löschen eines Projektes kann nicht rückgängig + gemacht werden. Möchtest Du das Projekt + "Test" dennoch löschen? + + + + + + + +; +42:{"confirmation":"$43","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"} +44:["03-components","actions","action"] +46:{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."} +47:{} +45:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$46","scope":"$47"} +48:{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"} +49:["03-components","actions","button"] +4b:{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."} +4c:{} +4a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$4b","scope":"$4c"} +4d:{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"} +4e:["03-components","actions","context-menu"] +50:{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."} +51:{} +4f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$50","scope":"$51"} +52:{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"} +53:["03-components","actions","copy-button"] +55:{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."} +56:{} +54:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$55","scope":"$56"} +57:{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"} +58:["03-components","content","avatar"] +5a:{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"} +5b:{} +59:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5a","scope":"$5b"} +5c:{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"} +5d:["03-components","content","heading"] +5f:{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."} +60:{} +5e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$5f","scope":"$60"} +62:T8c4,import { + IconApp, + IconBackup, + IconCronjob, + IconCustomer, + IconDatabase, + IconDomain, + IconEmail, + IconInbox, + IconMember, + IconMittwald, + IconProject, + IconSearchEngine, + IconServer, + IconSettings, + IconSpamProtectionOff, + IconSpamProtectionOn, + IconSshSftp, + IconSubdomain, + IconSupport, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +63:Tf4b,import { + IconBackLink, + IconCheck, + IconCheckboxChecked, + IconCheckboxEmpty, + IconCheckboxIndeterminate, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconChevronUp, + IconClose, + IconCode, + IconContextMenu, + IconCopy, + IconDashboard, + IconDate, + IconDelete, + IconExternalLink, + IconFilter, + IconHide, + IconHome, + IconListView, + IconLogout, + IconMinus, + IconNotification, + IconPlus, + IconRadioOff, + IconRadioOn, + IconRandom, + IconSave, + IconSearch, + IconShare, + IconShow, + IconSorting, + IconTerminate, + IconTileView, + IconTime, +} from "@mittwald/flow-react-components/Icons"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +61:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$62","functional":"$63","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"} +64:["03-components","content","icon"] +66:{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."} +67:{} +65:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$66","scope":"$67"} +68:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"} +69:["03-components","content","illustrated-message"] +6b:{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."} +6c:{} +6a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$6b","scope":"$6c"} +6d:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"} +6e:["03-components","content","image"] +70:{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."} +71:{} +6f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$70","scope":"$71"} +72:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"} +73:["03-components","content","inline-code"] +75:{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."} +76:{} +74:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$75","scope":"$76"} +77:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +78:["03-components","content","label"] +7a:{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."} +7b:{} +79:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7a","scope":"$7b"} +7c:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"} +7d:["03-components","content","labeled-value"] +7f:{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."} +80:{} +7e:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$7f","scope":"$80"} +81:{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"} +82:["03-components","content","skeleton"] +84:{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."} +85:{} +83:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$84","scope":"$85"} +86:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"} +87:["03-components","content","text"] +89:{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."} +8a:{} +88:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$89","scope":"$8a"} +8b:{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +8c:["03-components","form-controls","checkbox-button"] +8e:{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"} +8f:{} +8d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$8e","scope":"$8f"} +90:{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"} +91:["03-components","form-controls","checkbox-group"] +93:{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."} +94:{} +92:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$93","scope":"$94"} +95:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"} +96:["03-components","form-controls","checkbox"] +98:{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."} +99:{} +97:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$98","scope":"$99"} +9a:{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"} +9b:["03-components","form-controls","field-react-hook-form"] +9d:{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."} +9e:{} +9c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$9d","scope":"$9e"} +a0:T4f4,import { useForm } from "react-hook-form"; +import { + Field, + Form, +} from "@mittwald/flow-react-components/react-hook-form"; +import { TextField } from "@mittwald/flow-react-components/TextField"; +import { Label } from "@mittwald/flow-react-components/Label"; +import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup"; +import { Button } from "@mittwald/flow-react-components/Button"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription"; + +export default () => { + interface Values { + name: string; + } + const form = useForm(); + + const handleOnSubmit = (values: Values) => + alert(JSON.stringify(values)); + + return ( +
+
+ + + + + The name of the project + + + + + + +
+
+ ); +}; +9f:{"default":"$a0"} +a1:["03-components","form-controls","form-react-hook-form"] +a3:{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."} +a4:{} +a2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a3","scope":"$a4"} +a5:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"} +a6:["03-components","form-controls","number-field"] +a8:{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."} +a9:{} +a7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$a8","scope":"$a9"} +aa:{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"} +ab:["03-components","form-controls","radio-group"] +ad:{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."} +ae:{} +ac:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ad","scope":"$ae"} +af:{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"} +b0:["03-components","form-controls","select"] +b2:{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."} +b3:{} +b1:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b2","scope":"$b3"} +b4:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"} +b5:["03-components","form-controls","slider"] +b7:{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."} +b8:{} +b6:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$b7","scope":"$b8"} +b9:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"} +ba:["03-components","form-controls","switch"] +bc:{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."} +bd:{} +bb:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$bc","scope":"$bd"} +be:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"} +bf:["03-components","form-controls","text-area"] +c1:{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."} +c2:{} +c0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c1","scope":"$c2"} +c3:{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"} +c4:["03-components","form-controls","text-field"] +c6:{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."} +c7:{} +c5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$c6","scope":"$c7"} +c8:{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"} +c9:["03-components","navigation","breadcrumb"] +cb:{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."} +cc:{} +ca:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$cb","scope":"$cc"} +ce:T50e,import Button from "@mittwald/flow-react-components/Button"; +import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation"; +import { + IconLogout, + IconNotification, + IconSettings, + IconSupport, + IconSearch, +} from "@mittwald/flow-react-components/Icons"; +import ContextMenu, { + ContextMenuTrigger, +} from "@mittwald/flow-react-components/ContextMenu"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Image from "@mittwald/flow-react-components/Image"; +import Text from "@mittwald/flow-react-components/Text"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + + + + + + + Profil + + + + Logout + + + +; +cd:{"contextMenu":"$ce","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"} +cf:["03-components","navigation","header-navigation"] +d1:{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."} +d2:{} +d0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d1","scope":"$d2"} +d3:{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"} +d4:["03-components","navigation","link"] +d6:{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."} +d7:{} +d5:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$d6","scope":"$d7"} +d8:{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"} +d9:["03-components","navigation","navigation"] +db:{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."} +dc:{} +da:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$db","scope":"$dc"} +de:T5cf,import Tabs, { + Tab, + TabTitle, +} from "@mittwald/flow-react-components/Tabs"; +import Section from "@mittwald/flow-react-components/Section"; +import Heading from "@mittwald/flow-react-components/Heading"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import LabeledValue from "@mittwald/flow-react-components/LabeledValue"; +import Text from "@mittwald/flow-react-components/Text"; +import Header from "@mittwald/flow-react-components/Header"; +import Switch from "@mittwald/flow-react-components/Switch"; + + + + Allgemein +
+ Allgemein + + + +
+
+ + Speicherplatz +
+ Speicherplatz + + + 2.4 GB + +
+
+ + Spamschutz +
+
+ Spamschutz + Spamfilter +
+ + Der Spamfilter schützt dich vor ungewollten E-Mails. + Niemand will Müll in seinem Postfach, daher + empfehlen wir den Spamschutz immer aktiviert zu + lassen. + +
+
+
; +dd:{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$de","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"} +df:["03-components","navigation","tabs"] +e1:{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."} +e2:{} +e0:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$e1","scope":"$e2"} +e3:{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +ea:T5bd,import Modal, { + ModalTrigger, +} from "@mittwald/flow-react-components/Modal"; +import Content from "@mittwald/flow-react-components/Content"; +import Text from "@mittwald/flow-react-components/Text"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import ActionGroup from "@mittwald/flow-react-components/ActionGroup"; +import Button from "@mittwald/flow-react-components/Button"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Action from "@mittwald/flow-react-components/Action"; +import { sleepLong } from "@/content/03-components/actions/action/examples/lib"; + + + + + Neue Organisation + + + Eine Organisation kannst du dir wie ein Unternehmen + vorstellen. An diesem Ort verwaltest du deine + Mitarbeiter, Zahlungsmodalitäten und kannst deine + Rechnungen einsehen. + + + + + + + + + + + + + + +; +e8:{"default":"$e9","offCanvas":"$ea"} +eb:["03-components","overlays","modal"] +ed:{"component":"OffCanvas","description":"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden"} +ee:{} +ec:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$ed","scope":"$ee"} +f0:T44a,import Text from "@mittwald/flow-react-components/Text"; +import Button from "@mittwald/flow-react-components/Button"; +import OffCanvas, { + OffCanvasTrigger, +} from "@mittwald/flow-react-components/OffCanvas"; +import { + IconCustomer, + IconMenu, + IconProject, + IconServer, +} from "@mittwald/flow-react-components/Icons"; +import Link from "@mittwald/flow-react-components/Link"; +import Navigation from "@mittwald/flow-react-components/Navigation"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Section } from "@mittwald/flow-react-components/Section"; + + + + + Menü +
+ + + + Customer + + + + Server + + + + Project + + +
+
+
; +ef:{"default":"$f0"} +f1:["03-components","overlays","off-canvas"] +f3:{"component":"Tooltip","description":"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an."} +f4:{} +f2:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f3","scope":"$f4"} +f5:{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Speichern\n;\n"} +f6:["03-components","overlays","tooltip"] +f8:{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."} +f9:{} +f7:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$f8","scope":"$f9"} +fa:{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"} +fb:["03-components","status","counter-label"] +fd:{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."} +fe:{} +fc:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$fd","scope":"$fe"} +100:T513,import InlineAlert from "@mittwald/flow-react-components/InlineAlert"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Content from "@mittwald/flow-react-components/Content"; + + + + E-Mail-Adresse wurde archiviert + + Da deine Domain gelöscht wurde, wurde diese + E-Mail-Adresse archiviert. Um E-Mails empfangen und + senden zu können musst du die Adresse wieder + umbenennen. + + + + + Dein Speicher ist fast voll + + Dein Speicher ist zu über 80% belegt. Wir empfehlen + dir deinen Speicherplatz zu erweitern, um Problemen + vorzubeugen. + + + + + + Es konnte kein SSL-Zertifikat ausgestellt werden + + + Für diese Domain konnte kein SSL-Zertifikat + ausgestellt werden, da die Domain per IP nicht auf + deine Server-IP zeigt. + + + + + Deine App wurde aktualisiert + + Deine App wurde erfolgreich auf die neueste Version + aktualisiert. + + +; +ff:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$100","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\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 Adresse wieder umbenennen.\n \n \n;\n"} +101:["03-components","status","inline-alert"] +103:{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."} +104:{} +102:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$103","scope":"$104"} +105:{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"} +106:["03-components","status","loading-spinner"] +108:{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"} +109:{} +107:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$108","scope":"$109"} +10a:{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"} +10b:["03-components","status","notification-provider"] +10d:{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."} +10e:{} +10c:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$10d","scope":"$10e"} +10f:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"} +110:["03-components","status","notification"] +112:{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."} +113:{} +111:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$112","scope":"$113"} +114:{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"} +115:["03-components","status","progress-bar"] +117:{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."} +118:{} +116:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$117","scope":"$118"} +119:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"} +11a:["03-components","status","status-badge"] +11c:{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"} +11d:{} +11b:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$11c","scope":"$11d"} +11e:{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"} +11f:["03-components","status","status-icon"] +121:{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."} +122:{} +120:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$121","scope":"$122"} +123:{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"} +124:["03-components","structure","accordion"] +126:{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."} +127:{} +125:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$126","scope":"$127"} +128:{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"} +129:["03-components","structure","column-layout"] +12b:{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"} +12c:{} +12a:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$12b","scope":"$12c"} +12d:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"} +12e:["03-components","structure","layout-card"] +130:{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."} +131:{} +12f:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$130","scope":"$131"} +133:T66f,import List, { + ListFilter, + ListItem, + ListItemView, + ListSorting, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; +import MenuItem from "@mittwald/flow-react-components/MenuItem"; + + + + + property="type" + mode="some" + name="Type" + /> + property="domain" name="Domain" /> + property="type" name="Type" /> + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +134:T563,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +135:T56c,import List, { + ListItem, + ListItemView, + ListStaticData, +} from "@mittwald/flow-react-components/List"; +import { + type Domain, + domains, +} from "@/content/03-components/structure/list/examples/domainApi"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import ContextMenu, { + MenuItem, +} from "@mittwald/flow-react-components/ContextMenu"; +import { + IconDomain, + IconSubdomain, +} from "@mittwald/flow-react-components/Icons"; +import StatusBadge from "@mittwald/flow-react-components/StatusBadge"; + + + + > + {(domain) => ( + + + {domain.type === "Domain" ? ( + + ) : ( + + )} + + {domain.hostname} + {domain.verified ? ( + {domain.type} + ) : ( + + Nicht verifiziert + + )} + + Details anzeigen + Löschen + + + )} + +; +132:{"default":"$133","main":"$134","withLink":"$135"} +136:["03-components","structure","list"] +138:{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"} +139:{} +137:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$138","scope":"$139"} +13b:T42a,import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import Link from "@mittwald/flow-react-components/Link"; +import Section from "@mittwald/flow-react-components/Section"; +import TextField from "@mittwald/flow-react-components/TextField"; +import Label from "@mittwald/flow-react-components/Label"; +import { IconMember } from "@mittwald/flow-react-components/Icons"; + +<> +
+ + + Persönliche Informationen + + + + + + + +
+
+ Newsletter + + Kommende Releases, neue Features und Tipps rund um + dein Hosting – wir bringen dir das Wichtigste in dein + Postfach. Abonniere unseren Newsletter und bleib auf + dem Laufenden. + + Newsletter abonnieren +
+; +13a:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\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 Newsletter abonnieren\n
;\n","multiple":"$13b","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"} +13c:["03-components","structure","section"] +13e:{"component":"Separator","description":"A Separator is a horizontal line that separates content."} +13f:{} +13d:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$13e","scope":"$13f"} +140:{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"} +141:["03-components","structure","separator"] +143:{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"} +144:{} +142:{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":"$143","scope":"$144"} +146:T4c5,import { + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@mittwald/flow-react-components/Table"; +import { InlineCode } from "@mittwald/flow-react-components/InlineCode"; + + + + 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 + + +
; +145:{"default":"$146"} +147:["03-components","structure","table"] +14a:{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"} +14b:{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"} +14c:{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"} +14d:{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"} +14e:{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"} +14f:{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"} +150:{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"} +151:{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"} +152:{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"} +153:{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"} +154:{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"} +155:{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"} +156:{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"} +157:{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"} +158:{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"} +159:{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"} +15a:{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"} +15b:{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"} +15c:{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"} +15d:{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"} +15e:{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"} +15f:{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"} +160:{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"} +161:{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"} +162:{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"} +163:{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"} +164:{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"} +165:{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"} +166:{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"} +167:{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"} +168:{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"} +169:{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"} +16a:{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"} +16b:{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"} +16c:{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"} +16d:{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"} +16e:{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"} +16f:{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"} +170:{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"} +171:{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"} +172:{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"} +173:{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"} +174:{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"} +175:{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"} +176:{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"} +177:{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"} +178:{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"} +179:{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"} +17a:{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"} +17b:{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"} +17c:{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"} +17d:{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"} +17e:{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"} +17f:{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"} +149:["$14a","$14b","$14c","$14d","$14e","$14f","$150","$151","$152","$153","$154","$155","$156","$157","$158","$159","$15a","$15b","$15c","$15d","$15e","$15f","$160","$161","$162","$163","$164","$165","$166","$167","$168","$169","$16a","$16b","$16c","$16d","$16e","$16f","$170","$171","$172","$173","$174","$175","$176","$177","$178","$179","$17a","$17b","$17c","$17d","$17e","$17f"] +6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":["$","$L9",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$La",null,{"size":"l","className":"layout_logo__PcxmI"}],["$","$Lb",null,{"level":1,"className":"$undefined","children":"Flow"}],["$","$Lc",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}],["$","$Ld",null,{"className":"layout_headerNavigation__SNRbw","docs":[{"mdxSource":{"compiledSource":"$e","frontmatter":{"description":"Willkommen in der Flow Dokumentation!"},"scope":{}},"examples":{},"slugs":["01-get-started","installation"],"filename":"01-get-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$f","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"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{},"slugs":["02-foundations","content-guidelines","fehlermeldungen"],"filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ActionGroup","description":"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet."},"scope":{}},"examples":{"additionalSecondary":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["03-components","actions","action-group"],"filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Action","description":"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen."},"scope":{}},"examples":{"confirmation":"$11","default":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleep } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n","feedback":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\n\n {\n // do nothing\n }}\n showFeedback\n>\n \n;\n","longAction":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\n \n;\n"},"slugs":["03-components","actions","action"],"filename":"03-components/actions/action/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Button","description":"Der Button dient zum Ausführen von Aktionen."},"scope":{}},"examples":{"colors":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","dark":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","default":"import Button from \"@mittwald/flow-react-components/Button\";\n\n {\n alert(\"Button gedrückt\");\n }}\n>\n Fortfahren/Aktion\n;\n","icon":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","iconText":"import Button from \"@mittwald/flow-react-components/Button\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport { IconChevronDown } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","light":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n ;\n;\n","plain":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","small":"import Button from \"@mittwald/flow-react-components/Button\";\n\n;\n","soft":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n","states":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","actions","button"],"filename":"03-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextMenu","description":"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält."},"scope":{}},"examples":{"default":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n {\n alert(id);\n }}\n >\n Item 1\n Item 2\n Item 3\n \n;\n","icon":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport { IconInfo } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\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","multi-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n","separator":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Item 1\n \n Item 2\n Item 3\n \n;\n","single-select":"import ContextMenu, {\n ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\n \n \n Item 1\n Item 2\n Item 3\n \n;\n"},"slugs":["03-components","actions","context-menu"],"filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CopyButton","description":"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren."},"scope":{}},"examples":{"default":"import CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["03-components","actions","copy-button"],"filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Avatar","description":"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen."},"scope":{}},"examples":{"colors":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\nimport { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport { IconCustomer } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Gillian Gopher\n \n \n Gustav Gopher\n \n \n Gina-Lisa Gopher\n \n \n Gorgio Gopher\n \n \n \n \n \n \n \n;\n","default":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n Gillian Gopher\n;\n","icon":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\n\n\n \n;\n","image":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\n\n\n \n;\n","sizes":"import Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Initials from \"@mittwald/flow-react-components/Initials\";\n\n\n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n \n Gillian Gopher\n \n;\n"},"slugs":["03-components","content","avatar"],"filename":"03-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Heading","description":"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen"},"scope":{}},"examples":{"dark":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Persönliche Informationen\n;\n","level-visual":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Das ist eine h4 Überschrift die aussieht wie eine h2\n Überschrift\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n \n Das ist eine Level 1 Überschrift\n \n \n Das ist eine Level 2 Überschrift\n \n \n Das ist eine Level 3 Überschrift\n \n \n Das ist eine Level 4 Überschrift\n \n \n Das ist eine Level 5 Überschrift\n \n;\n","light":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nDas ist eine Überschrift;\n"},"slugs":["03-components","content","heading"],"filename":"03-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Icon","description":"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs."},"scope":{}},"examples":{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","descriptive":"$12","functional":"$13","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","states":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport {\n IconDanger,\n IconFailed,\n IconInfo,\n IconPending,\n IconSucceeded,\n IconSuccess,\n IconWarning,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\nexport default () => {\n const svgString = `\\\n \n \n \n `;\n\n return {svgString};\n};\n","svg":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n\n \n \n \n;\n","tabler":"import Icon from \"@mittwald/flow-react-components/Icon\";\nimport { IconStar } from \"@tabler/icons-react\";\n\n\n \n;\n"},"slugs":["03-components","content","icon"],"filename":"03-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.7\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"IllustratedMessage","description":"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconApp } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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","negative":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport IllustratedMessage from \"@mittwald/flow-react-components/IllustratedMessage\";\nimport { IconDanger } from \"@mittwald/flow-react-components/Icons\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n Kein Zugriff\n \n Du hast keine Berechtigung, um auf diese Seite\n zuzugreifen.\n \n \n;\n"},"slugs":["03-components","content","illustrated-message"],"filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Image","description":"Mit der Image-Komponente können Bilder angezeigt werden."},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["03-components","content","image"],"filename":"03-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineCode","description":"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Gib yarn start ein um deine App\n zu starten.\n;\n"},"slugs":["03-components","content","inline-code"],"filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Label","description":"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","content","label"],"filename":"03-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LabeledValue","description":"Ein LabeledValue zeigt eine Information mit einem Label an."},"scope":{}},"examples":{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n p-eWRhpRV\n \n;\n","default":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n 20 GB\n;\n","inline-code":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\nimport CopyButton from \"@mittwald/flow-react-components/CopyButton\";\n\n\n \n 127.0.0.1\n \n;\n","link":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n https://mittwald.de\n;\n"},"slugs":["03-components","content","labeled-value"],"filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Skeleton","description":"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden."},"scope":{}},"examples":{"custom-size":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n\n \n \n;\n","default":"import Skeleton from \"@mittwald/flow-react-components/Skeleton\";\n\n;\n"},"slugs":["03-components","content","skeleton"],"filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Text","description":"Die Text-Komponente wird verwendet, um Texte zu gruppieren."},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\n\nDas ist ein Text;\n","emulateBoldWidth":"import Text from \"@mittwald/flow-react-components/Text\";\n\n\n \n Das ist ein Text\n \n \n Das ist ein Text\n \n;\n"},"slugs":["03-components","content","text"],"filename":"03-components/content/text/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxButton","description":"Der CheckboxButton verhält sich wie eine Checkbox."},"scope":{}},"examples":{"default":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox-button"],"filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CheckboxGroup","description":"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen"},"scope":{}},"examples":{"buttons":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","customColumns":"import CheckboxButton from \"@mittwald/flow-react-components/CheckboxButton\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n","default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\nimport CheckboxGroup from \"@mittwald/flow-react-components/CheckboxGroup\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Lesen\n Schreiben\n;\n"},"slugs":["03-components","form-controls","checkbox-group"],"filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Checkbox","description":"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen."},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","disabled":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n","indeterminated":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\n\n Ich stimme den AGBs zu und bestätige, dass ich die\n Datenschutzhinweise zur Kenntnis genommen habe.\n;\n"},"slugs":["03-components","form-controls","checkbox"],"filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Field","title":"Field (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Field/Field.tsx","description":"Die Field Komponente \"verbindet\" Flow Eingabefelder mit React Hook Form."},"scope":{}},"examples":{"default":"import { useForm } from \"react-hook-form\";\nimport {\n Field,\n Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () => {\n interface Values {\n name: string;\n }\n const form = useForm();\n\n return (\n
\n \n \n \n \n The name of the project\n \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 { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\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 \n \n \n
\n );\n};\n"},"slugs":["03-components","form-controls","field-react-hook-form"],"filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Form","title":"Form (React Hook Form)","gitHubComponentPath":"integrations/react-hook-form/components/Form/Form.tsx","description":"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden."},"scope":{}},"examples":{"default":"$14"},"slugs":["03-components","form-controls","form-react-hook-form"],"filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NumberField","description":"Das NumberField dient der Eingabe von Zahlen."},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Gib dein Alter ein\n;\n","disabled":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","invalid":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Ungültige Eingabe\n;\n","required":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","unit":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","number-field"],"filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"RadioGroup","description":"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss."},"scope":{}},"examples":{"buttons":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","content":"import RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n \n Domain buchen\n \n Du hast eine Wunsch-Domain? Kein Problem wir helfen\n dir die passende Domain für dich zu finden.\n \n \n \n Virtual Host einrichten\n \n Die Domain bleibt bei deinem bisherigen Anbieter, du\n kannst sie aber für deine Website in unserem mStudio\n verwenden.\n \n \n \n Subdomain anlegen\n \n Eine Subdomain von einer bereits vorhandenen Domain\n erstellen, um sie für dein Projekt zu verwenden.\n \n \n;\n","customColumns":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n RadioButton,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n","segmented":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Administrator\n Mitglied\n Buchhalter\n;\n"},"slugs":["03-components","form-controls","radio-group"],"filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Select","description":"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann."},"scope":{}},"examples":{"default":"import Select, {\n Option,\n} from \"@mittwald/flow-react-components/Select\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["03-components","form-controls","select"],"filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Slider","description":"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range."},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport Slider from \"@mittwald/flow-react-components/Slider\";\n\n\n \n;\n"},"slugs":["03-components","form-controls","slider"],"filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Switch","description":"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann."},"scope":{}},"examples":{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n"},"slugs":["03-components","form-controls","switch"],"filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextArea","description":"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextArea from \"@mittwald/flow-react-components/TextArea\";\n\n;\n"},"slugs":["03-components","form-controls","text-area"],"filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"TextField","description":"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren."},"scope":{}},"examples":{"characterCount":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","columnLayout":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n;\n","default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n \n Beginnt mit https://\n;\n","defaultValue":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","disabled":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","inputProps":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","invalid":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldError from \"@mittwald/flow-react-components/FieldError\";\n\n\n \n Das ist keine URL\n;\n","placeholder":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\n\n\n \n;\n","required":"import Label from \"@mittwald/flow-react-components/Label\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\n \n \n \n \n \n \n;\n","withoutLabel":"import TextField from \"@mittwald/flow-react-components/TextField\";\nimport FieldDescription from \"@mittwald/flow-react-components/FieldDescription\";\n\n\n Beginnt mit https://\n;\n"},"slugs":["03-components","form-controls","text-field"],"filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Breadcrumb","description":"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen."},"scope":{}},"examples":{"dark":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","default":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n","light":"import Breadcrumb from \"@mittwald/flow-react-components/Breadcrumb\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Projekte\n Apps\n Meine App\n;\n"},"slugs":["03-components","navigation","breadcrumb"],"filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"HeaderNavigation","description":"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann."},"scope":{}},"examples":{"contextMenu":"$15","dark":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Komponenten\n \n \n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconSearch } from \"@mittwald/flow-react-components/Icons\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\n\n\n Getting startet\n \n Components\n \n \n;\n"},"slugs":["03-components","navigation","header-navigation"],"filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Link","description":"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden."},"scope":{}},"examples":{"dark":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n","default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nZum Dashboard;\n","icon":"import Link from \"@mittwald/flow-react-components/Link\";\nimport { IconExternalLink } from \"@mittwald/flow-react-components/Icons\";\n\n\n mittwald.de\n \n;\n","inline":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Inline link\n;\n","inlineText":"import Link from \"@mittwald/flow-react-components/Link\";\nimport Text from \"@mittwald/flow-react-components/Text\";\n\n\n Sieh dir unser Onboarding an um\n weitere Informationen zu erhalten.\n;\n","light":"import Link from \"@mittwald/flow-react-components/Link\";\n\n\n Zum Dashboard\n;\n"},"slugs":["03-components","navigation","link"],"filename":"03-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Navigation","description":"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann."},"scope":{}},"examples":{"collapsable":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","default":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n Apple\n \n mittwald\n \n Adobe\n Google\n;\n","groups":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n \n \n Apps\n Datenbanken\n Domains\n \n;\n","icons":"import Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n\n \n \n Organisationen\n \n \n \n Server\n \n \n \n Projekte\n \n;\n","separator":"import Navigation, {\n NavigationGroup,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport Separator from \"@mittwald/flow-react-components/Separator\";\n\n\n \n \n Dashboard\n \n Performance\n \n \n\n \n\n \n \n Apps\n Datenbanken\n Domains\n \n;\n"},"slugs":["03-components","navigation","navigation"],"filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Tabs","description":"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln."},"scope":{}},"examples":{"collapsed":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","content":"$16","default":"import Tabs, {\n Tab,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n Speicherplatz\n Speicherplatz Inhalt\n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n","status":"import {\n Tab,\n Tabs,\n TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport { InlineAlert } from \"@mittwald/flow-react-components/InlineAlert\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { StatusIcon } from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n Allgemein\n Allgemeiner Inhalt\n \n \n \n Speicherplatz\n \n \n \n Dein Speicherplatz ist voll\n \n \n \n Spamschutz\n Spamschutz Inhalt\n \n;\n"},"slugs":["03-components","navigation","tabs"],"filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ContextualHelp","description":"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert."},"scope":{}},"examples":{"default":"import {\n ContextualHelp,\n ContextualHelpTrigger,\n} from \"@mittwald/flow-react-components/ContextualHelp\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\n\n\n \n Speichern\n;\n"},"slugs":["03-components","overlays","tooltip"],"filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"CounterBadge","description":"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen."},"scope":{}},"examples":{"default":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","high-number":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","with-button":"import Button from \"@mittwald/flow-react-components/Button\";\nimport { IconNotification } from \"@mittwald/flow-react-components/Icons\";\nimport CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n","without-content":"import CounterBadge from \"@mittwald/flow-react-components/CounterBadge\";\n\n;\n"},"slugs":["03-components","status","counter-label"],"filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"InlineAlert","description":"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an."},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n E-Mail-Adresse wurde archiviert\n;\n","status":"$1a","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\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 Adresse wieder umbenennen.\n \n \n;\n"},"slugs":["03-components","status","inline-alert"],"filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LoadingSpinner","description":"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet."},"scope":{}},"examples":{"default":"import LoadingSpinner from \"@mittwald/flow-react-components/LoadingSpinner\";\n\n;\n"},"slugs":["03-components","status","loading-spinner"],"filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"NotificationProvider","description":"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications"},"scope":{}},"examples":{"auto-close":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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","default":"import { Button } from \"@mittwald/flow-react-components/Button\";\nimport { useNotificationController } from \"@mittwald/flow-react-components/NotificationProvider\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Notification } from \"@mittwald/flow-react-components/Notification\";\n\nexport default () => {\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/NotificationProvider\";\n\nMeine App;\n"},"slugs":["03-components","status","notification-provider"],"filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Notification","description":"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen."},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n;\n","status":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Notification from \"@mittwald/flow-react-components/Notification\";\n\n\n \n E-Mail-Adresse archiviert\n \n Die E-Mail-Adresse example@mittwald.de wurde\n archiviert.\n \n \n\n \n Speicher fast voll\n \n Der Speicherplatz im Projekt My Project ist zu\n 80% voll.\n \n \n\n \n Kein SSL-Zertifikat\n \n Für example.de konnte kein SSL-Zertifikat\n ausgestellt werden.\n \n \n\n \n App installiert\n \n Deine App My WordPress wurde erfolgreich\n installiert.\n \n \n;\n"},"slugs":["03-components","status","notification"],"filename":"03-components/status/notification/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ProgressBar","description":"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist."},"scope":{}},"examples":{"default":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","maxValue":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","small":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n;\n","status":"import ProgressBar from \"@mittwald/flow-react-components/ProgressBar\";\n\n\n \n Info\n \n \n Success\n \n \n Warning\n \n \n Danger\n \n;\n"},"slugs":["03-components","status","progress-bar"],"filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusBadge","description":"Der StatusBadge zeigt Informationen zum Zustand eines Elements."},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nArchiviert;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Archiviert\n \n Update erfolgreich\n \n \n Speicher fast voll\n \n SSL fehlt\n;\n"},"slugs":["03-components","status","status-badge"],"filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"StatusIcon","description":"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert"},"scope":{}},"examples":{"default":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n;\n","status":"import StatusIcon from \"@mittwald/flow-react-components/StatusIcon\";\n\n\n \n \n \n \n;\n"},"slugs":["03-components","status","status-icon"],"filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Accordion","description":"Das Accordion dient dazu Content-Bereiche ein- und auszublenden."},"scope":{}},"examples":{"default-expanded":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Accordion Titel\n Inhalt des Accordions\n;\n","label":"import Accordion from \"@mittwald/flow-react-components/Accordion\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n Inhalt des Accordions\n;\n"},"slugs":["03-components","structure","accordion"],"filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"ColumnLayout","description":"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden."},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n","default":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n;\n","main":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\n \n \n \n \n \n \n;\n"},"slugs":["03-components","structure","column-layout"],"filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"LayoutCard","description":"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann"},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\nInhalt der Layout Card;\n"},"slugs":["03-components","structure","layout-card"],"filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n example: \"main\",\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"List","description":"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar."},"scope":{}},"examples":{"default":"$1b","main":"$1c","withLink":"$1d"},"slugs":["03-components","structure","list"],"filename":"03-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Section","description":"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte"},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Link from \"@mittwald/flow-react-components/Link\";\n\n
\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 Newsletter abonnieren\n
;\n","multiple":"$1e","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport Header from \"@mittwald/flow-react-components/Header\";\n\n
\n
\n Newsletter\n Subscribed\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","switch":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n
\n
\n Newsletter\n Abonnement\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"},"slugs":["03-components","structure","section"],"filename":"03-components/structure/section/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Separator","description":"A Separator is a horizontal line that separates content."},"scope":{}},"examples":{"default":"import Separator from \"@mittwald/flow-react-components/Separator\";\n\n;\n"},"slugs":["03-components","structure","separator"],"filename":"03-components/structure/separator/index.mdx"},{"mdxSource":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const {LiveCodeEditor} = {\n ..._provideComponents(),\n ...props.components\n };\n if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n return _jsx(LiveCodeEditor, {\n editorDisabled: true,\n zoom: 0.6\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"component":"Table","description":"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen"},"scope":{}},"examples":{"default":"$1f"},"slugs":["03-components","structure","table"],"filename":"03-components/structure/table/index.mdx"}]}],["$","$L20",null,{"className":"layout_mobileNavigation__1XY9K","children":["$","$L21",null,{"children":["$","$L22",null,{"children":[["$","$L23",null,{"color":"secondary","variant":"plain","children":["$","$L24",null,{}]}],["$","$L25",null,{"className":"layout_mobileNavigationOffCanvas__coBZM","children":[["$","$L26",null,{"children":"Menü"}],["$","$L27",null,{"children":[["$","$Ld",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}],["$","$L148",null,{"docs":"$149"}]]}]]}]]}]}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L180",null,{"className":"layout_mainNavigation__zVTd_","children":["$","$L148",null,{"docs":[{"mdxSource":"$28","examples":"$2c","slugs":"$2d","filename":"01-get-started/installation/index.mdx"},{"mdxSource":"$2e","examples":"$32","slugs":"$33","filename":"01-get-started/stylesheet/index.mdx"},{"mdxSource":"$34","examples":"$38","slugs":"$39","filename":"02-foundations/content-guidelines/fehlermeldungen/index.mdx"},{"mdxSource":"$3a","examples":"$3d","slugs":"$3e","filename":"03-components/actions/action-group/index.mdx"},{"mdxSource":"$3f","examples":"$42","slugs":"$44","filename":"03-components/actions/action/index.mdx"},{"mdxSource":"$45","examples":"$48","slugs":"$49","filename":"03-components/actions/button/index.mdx"},{"mdxSource":"$4a","examples":"$4d","slugs":"$4e","filename":"03-components/actions/context-menu/index.mdx"},{"mdxSource":"$4f","examples":"$52","slugs":"$53","filename":"03-components/actions/copy-button/index.mdx"},{"mdxSource":"$54","examples":"$57","slugs":"$58","filename":"03-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5c","slugs":"$5d","filename":"03-components/content/heading/index.mdx"},{"mdxSource":"$5e","examples":"$61","slugs":"$64","filename":"03-components/content/icon/index.mdx"},{"mdxSource":"$65","examples":"$68","slugs":"$69","filename":"03-components/content/illustrated-message/index.mdx"},{"mdxSource":"$6a","examples":"$6d","slugs":"$6e","filename":"03-components/content/image/index.mdx"},{"mdxSource":"$6f","examples":"$72","slugs":"$73","filename":"03-components/content/inline-code/index.mdx"},{"mdxSource":"$74","examples":"$77","slugs":"$78","filename":"03-components/content/label/index.mdx"},{"mdxSource":"$79","examples":"$7c","slugs":"$7d","filename":"03-components/content/labeled-value/index.mdx"},{"mdxSource":"$7e","examples":"$81","slugs":"$82","filename":"03-components/content/skeleton/index.mdx"},{"mdxSource":"$83","examples":"$86","slugs":"$87","filename":"03-components/content/text/index.mdx"},{"mdxSource":"$88","examples":"$8b","slugs":"$8c","filename":"03-components/form-controls/checkbox-button/index.mdx"},{"mdxSource":"$8d","examples":"$90","slugs":"$91","filename":"03-components/form-controls/checkbox-group/index.mdx"},{"mdxSource":"$92","examples":"$95","slugs":"$96","filename":"03-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$97","examples":"$9a","slugs":"$9b","filename":"03-components/form-controls/field-react-hook-form/index.mdx"},{"mdxSource":"$9c","examples":"$9f","slugs":"$a1","filename":"03-components/form-controls/form-react-hook-form/index.mdx"},{"mdxSource":"$a2","examples":"$a5","slugs":"$a6","filename":"03-components/form-controls/number-field/index.mdx"},{"mdxSource":"$a7","examples":"$aa","slugs":"$ab","filename":"03-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$ac","examples":"$af","slugs":"$b0","filename":"03-components/form-controls/select/index.mdx"},{"mdxSource":"$b1","examples":"$b4","slugs":"$b5","filename":"03-components/form-controls/slider/index.mdx"},{"mdxSource":"$b6","examples":"$b9","slugs":"$ba","filename":"03-components/form-controls/switch/index.mdx"},{"mdxSource":"$bb","examples":"$be","slugs":"$bf","filename":"03-components/form-controls/text-area/index.mdx"},{"mdxSource":"$c0","examples":"$c3","slugs":"$c4","filename":"03-components/form-controls/text-field/index.mdx"},{"mdxSource":"$c5","examples":"$c8","slugs":"$c9","filename":"03-components/navigation/breadcrumb/index.mdx"},{"mdxSource":"$ca","examples":"$cd","slugs":"$cf","filename":"03-components/navigation/header-navigation/index.mdx"},{"mdxSource":"$d0","examples":"$d3","slugs":"$d4","filename":"03-components/navigation/link/index.mdx"},{"mdxSource":"$d5","examples":"$d8","slugs":"$d9","filename":"03-components/navigation/navigation/index.mdx"},{"mdxSource":"$da","examples":"$dd","slugs":"$df","filename":"03-components/navigation/tabs/index.mdx"},{"mdxSource":"$e0","examples":"$e3","slugs":"$e4","filename":"03-components/overlays/contextual-help/index.mdx"},{"mdxSource":"$e5","examples":"$e8","slugs":"$eb","filename":"03-components/overlays/modal/index.mdx"},{"mdxSource":"$ec","examples":"$ef","slugs":"$f1","filename":"03-components/overlays/off-canvas/index.mdx"},{"mdxSource":"$f2","examples":"$f5","slugs":"$f6","filename":"03-components/overlays/tooltip/index.mdx"},{"mdxSource":"$f7","examples":"$fa","slugs":"$fb","filename":"03-components/status/counter-label/index.mdx"},{"mdxSource":"$fc","examples":"$ff","slugs":"$101","filename":"03-components/status/inline-alert/index.mdx"},{"mdxSource":"$102","examples":"$105","slugs":"$106","filename":"03-components/status/loading-spinner/index.mdx"},{"mdxSource":"$107","examples":"$10a","slugs":"$10b","filename":"03-components/status/notification-provider/index.mdx"},{"mdxSource":"$10c","examples":"$10f","slugs":"$110","filename":"03-components/status/notification/index.mdx"},{"mdxSource":"$111","examples":"$114","slugs":"$115","filename":"03-components/status/progress-bar/index.mdx"},{"mdxSource":"$116","examples":"$119","slugs":"$11a","filename":"03-components/status/status-badge/index.mdx"},{"mdxSource":"$11b","examples":"$11e","slugs":"$11f","filename":"03-components/status/status-icon/index.mdx"},{"mdxSource":"$120","examples":"$123","slugs":"$124","filename":"03-components/structure/accordion/index.mdx"},{"mdxSource":"$125","examples":"$128","slugs":"$129","filename":"03-components/structure/column-layout/index.mdx"},{"mdxSource":"$12a","examples":"$12d","slugs":"$12e","filename":"03-components/structure/layout-card/index.mdx"},{"mdxSource":"$12f","examples":"$132","slugs":"$136","filename":"03-components/structure/list/index.mdx"},{"mdxSource":"$137","examples":"$13a","slugs":"$13c","filename":"03-components/structure/section/index.mdx"},{"mdxSource":"$13d","examples":"$140","slugs":"$141","filename":"03-components/structure/separator/index.mdx"},{"mdxSource":"$142","examples":"$145","slugs":"$147","filename":"03-components/structure/table/index.mdx"}]}]}],["$","main",null,{"className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]]}]]}]}]}]}] +189:T137f,"use strict"; +const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; +const {useMDXComponents: _provideComponents} = arguments[0]; +function _createMdxContent(props) { + const _components = { + a: "a", + code: "code", + h2: "h2", + hr: "hr", + li: "li", + p: "p", + ul: "ul", + ..._provideComponents(), + ...props.components + }, {LiveCodeEditor} = _components; + if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); + return _jsxs(_Fragment, { + children: [_jsx(_components.h2, { + children: "Playground" + }), "\n", _jsxs(_components.p, { + children: ["Verwende ", _jsx(_components.code, { + children: "" + }), ", um ein TextField anzuzeigen. Integriere immer ein\n", _jsx(_components.code, { + children: "